<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue全家桶 | 李世龙</title><meta name="keywords" content="博客 前端"><meta name="author" content="lee"><meta name="copyright" content="lee"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Vue学习路线vue基础 vue-cli 脚手架 vue-router 路由 vuex element-UI vue3 什么是Vue一套用于构建用户界面的 渐进式框架 **构造用户界面:**将数据转换成界面 渐进式框架:可以自底向上逐层一应用 Vue特点 组件化,提高代码复用率,更好维护   声明式编码,无需操作DOM,提高开发效率 与javaScript的命令式编码的区别  Vue中的声明式">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue全家桶">
<meta property="og:url" content="http://blog.cai2.wang/2022/08/24/Vue%E5%85%A8%E5%AE%B6%E6%A1%B6/index.html">
<meta property="og:site_name" content="李世龙">
<meta property="og:description" content="Vue学习路线vue基础 vue-cli 脚手架 vue-router 路由 vuex element-UI vue3 什么是Vue一套用于构建用户界面的 渐进式框架 **构造用户界面:**将数据转换成界面 渐进式框架:可以自底向上逐层一应用 Vue特点 组件化,提高代码复用率,更好维护   声明式编码,无需操作DOM,提高开发效率 与javaScript的命令式编码的区别  Vue中的声明式">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_Mind_map_re_nlb6.png">
<meta property="article:published_time" content="2022-08-24T00:43:34.000Z">
<meta property="article:modified_time" content="2022-08-24T00:51:15.044Z">
<meta property="article:author" content="lee">
<meta property="article:tag" content="博客 前端">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_Mind_map_re_nlb6.png"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/avatar.jpg"><link rel="canonical" href="http://blog.cai2.wang/2022/08/24/Vue%E5%85%A8%E5%AE%B6%E6%A1%B6/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-left"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Vue全家桶',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-08-24 08:51:15'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    })(window)</script><link rel="stylesheet" href="/css/iconfont.css"><link rel="stylesheet" href="/css/index.min.css"><link rel="stylesheet" href="/css/bg.css"><meta name="generator" content="Hexo 5.4.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/avatar.jpg" onerror="onerror=null;src='https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">13</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/video/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li><li><a class="site-page child" href="/love/"><i class="fa-fw fa fa-heartbeat"></i><span> 心动</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/my/"><i class="fa-fw fas fa-ad"></i><span> 我的</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-seedling"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">李世龙</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/video/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li><li><a class="site-page child" href="/love/"><i class="fa-fw fa fa-heartbeat"></i><span> 心动</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/my/"><i class="fa-fw fas fa-ad"></i><span> 我的</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-seedling"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">Vue全家桶</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-08-24T00:43:34.000Z" title="发表于 2022-08-24 08:43:34">2022-08-24</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-08-24T00:51:15.044Z" title="更新于 2022-08-24 08:51:15">2022-08-24</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">15.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>64分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue全家桶"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div><article class="post-content" id="article-container"><h2 id="Vue学习路线"><a href="#Vue学习路线" class="headerlink" title="Vue学习路线"></a>Vue学习路线</h2><p>vue基础</p>
<p>vue-cli 脚手架</p>
<p>vue-router 路由</p>
<p>vuex</p>
<p>element-UI</p>
<p>vue3</p>
<h3 id="什么是Vue"><a href="#什么是Vue" class="headerlink" title="什么是Vue"></a>什么是Vue</h3><p><strong>一套用于构建用户界面的 渐进式框架</strong></p>
<p>**构造用户界面:**将数据转换成界面</p>
<p><strong>渐进式框架</strong>:可以自底向上逐层一应用</p>
<h3 id="Vue特点"><a href="#Vue特点" class="headerlink" title="Vue特点"></a>Vue特点</h3><ol>
<li><p>组件化,提高代码复用率,更好维护</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220107143306095.png" alt="image-20220107143306095"></p>
</li>
<li><p>声明式编码,无需操作DOM,提高开发效率</p>
<p>与javaScript的命令式编码的区别</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220107143906213.png" alt="image-20220107143906213"></p>
<p>Vue中的声明式</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220107143946184.png" alt="image-20220107143946184"></p>
</li>
<li><p>使用虚拟DOM和优秀的Diff算法,复用节点</p>
<p> <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220107150035995.png" alt="image-20220107150035995"></p>
</li>
</ol>
<p><strong>Diff</strong>算法,新老虚拟DOM对比,如果有一样的 就不更新</p>
<h3 id="Vue简单案例"><a href="#Vue简单案例" class="headerlink" title="Vue简单案例"></a>Vue简单案例</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- Vue的工作需要Vue 实例  至少传入一个配置对象</span><br><span class="line">	 root容器的代码依然符合html规范 只不过混入了特殊Vue语法</span><br><span class="line">	 root容器中的代码被称为[Vue模板]</span><br><span class="line">	 容器div 后有 实例vue模板解析</span><br><span class="line">--&gt;</span><br><span class="line">&lt;!-- 准备一个容器 --&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello \&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">	Vue.config.productionTip = <span class="literal">false</span><span class="comment">//组织vue启动时提示不是生产力</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">	<span class="comment">//创建vue实例(new Vue 一一对应)</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">	<span class="keyword">var</span> a = <span class="keyword">new</span> Vue(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,<span class="comment">//用于指定当前Vue实利 为哪个容器服务 值通常为 css选择器字符串</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="attr">data</span>:&#123;<span class="comment">//data中的数据用来存储,数据供el锁指定的容器去使用,值暂时写成一个对象</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">name</span>:<span class="string">&#x27;王展&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">	&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">	</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p><strong>注!</strong> 当一个vue实例绑定多个标签时,只会对第一个生效</p>
<pre><code>  当多个vue实例绑定一个标签时,第一个vue实例有效
</code></pre>
<h3 id="模板语法"><a href="#模板语法" class="headerlink" title="模板语法:"></a>模板语法:</h3><h4 id="插值语法-lt-–swig￼120–-gt"><a href="#插值语法-lt-–swig￼120–-gt" class="headerlink" title="插值语法&lt;!–swig￼120–&gt;"></a>插值语法&lt;!–swig￼120–&gt;</span></h4><pre><code>button @click=&quot;isHot = !isHot&quot;&gt;切换天气&lt;/button&gt;
</code></pre>
</div>


<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">el:<span class="string">&quot;#root&quot;</span>,</span><br><span class="line">	<span class="attr">data</span>:&#123;</span><br><span class="line">		<span class="attr">isHot</span>:<span class="literal">true</span>,</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">computed</span>:&#123;</span><br><span class="line">		<span class="function"><span class="title">info</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">this</span>.isHot? <span class="string">&#x27;炎热&#x27;</span> : <span class="string">&#x27;凉爽&#x27;</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="监视"><a href="#监视" class="headerlink" title="监视"></a>监视</h4><p>方式一:写在vue实例里</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">watch:&#123;</span><br><span class="line">		<span class="comment">//判断是否需要先立即执行一次</span></span><br><span class="line">		<span class="attr">immediate</span>:<span class="literal">true</span></span><br><span class="line">		<span class="attr">isHot</span>:&#123;</span><br><span class="line">			<span class="comment">//handler什么时候调用?当isHot发生改变时(回调函数)</span></span><br><span class="line">			<span class="function"><span class="title">handler</span>(<span class="params">newValue,oldValue</span>)</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&quot;isHot&quot;</span>,oldValue,newValue);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>方式二:使用api</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">vm.$watch(<span class="string">&#x27;isHot&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">immediate</span>:<span class="literal">true</span>,</span><br><span class="line">	<span class="function"><span class="title">handler</span>(<span class="params">newValue,oldValue</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;isHot被修改了&quot;</span>,newValue,oldValue)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="监视多级结构中所有属性变化"><a href="#监视多级结构中所有属性变化" class="headerlink" title="监视多级结构中所有属性变化:"></a>监视多级结构中所有属性变化:</h3><p>深度监视:</p>
<pre><code>Vue中的watch默认不检测对象内部的改变(一层)

配置deep:true可以检测对象内部的改变(多层)
</code></pre>
<p>备注:</p>
<pre><code>Vue自身可以检测对象内部的改变,但是watch不行

使用watch时根据数据结构,决定是否使用深度监视
</code></pre>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">加一个 deep:<span class="literal">true</span><span class="comment">//默认不能检测到data中的多级结构</span></span><br></pre></td></tr></table></figure>

<h3 id="监视简写形式"><a href="#监视简写形式" class="headerlink" title="监视简写形式"></a>监视简写形式</h3><p>配置项写法:</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220111230346152.png" alt="image-20220111230346152"></p>
<p>vm.$watch方法</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220111230320558.png" alt="image-20220111230320558"></p>
<p>优点:方便</p>
<p>缺点:不能设置immediate 和 deep属性</p>
<h3 id="侦听属性和计算属性的区别"><a href="#侦听属性和计算属性的区别" class="headerlink" title="侦听属性和计算属性的区别:"></a>侦听属性和计算属性的区别:</h3><p>1.computd可以完成的 watch都可以,反之不行,例如异步操作</p>
<p>2.所被Vue管理的函数 最好写成普通函数,<strong>这样才能指向vm 或者组件实例对象</strong></p>
<p>   不被Vue管理的函数,例如定时器,ajax  最好写成箭头,<strong>这样this的指向是vm 要不然会指向window</strong></p>
<h2 id="绑定样式"><a href="#绑定样式" class="headerlink" title="绑定样式"></a>绑定样式</h2><h4 id="class的绑定"><a href="#class的绑定" class="headerlink" title="class的绑定"></a>class的绑定</h4><p>假设有 basic nomal等一系列css的类选择器内容</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;root&quot;</span>&gt;</span><br><span class="line">    <span class="comment">//方法1:字符串写法 样式类名不确定,需要动态指定</span></span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;basic&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;mood&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;changeClass&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    <span class="comment">//方法2:数组写法   绑定个数不确定,名字更不确定</span></span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;basic&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;arr&quot;</span> &gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>	</span><br><span class="line">    <span class="comment">//方法3:对象写法  绑定个数确定,名字确定,用不用不确定,动态决定用不用   </span></span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;basic&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;obj&quot;</span> &gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>	<span class="comment">//:class=&quot;&#123;classA:true,classB&#125;&quot;	</span></span><br><span class="line">&lt;/div&gt;	</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">new</span> Vue(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">el</span>:<span class="string">&quot;#root&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">data</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">mood</span>:<span class="string">&quot;basic&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">                <span class="attr">arr</span>:[<span class="string">&quot;a,b,c&quot;</span>],</span></span></span><br><span class="line"><span class="javascript"><span class="xml">                <span class="attr">obj</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">                    <span class="attr">classA</span>:<span class="literal">false</span>,<span class="comment">//不应用 a这个class</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">                    <span class="attr">classB</span>:<span class="literal">true</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">                &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">methods</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="function"><span class="title">changeClass</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="built_in">this</span>.mood = <span class="string">&quot;normal&quot;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p>方法1:字符串写法  运用场景: 样式类名不确定</p>
<p>方法2:数组写法,更灵活  场景: 样式个数不确定</p>
<h4 id="Style的绑定"><a href="#Style的绑定" class="headerlink" title="Style的绑定"></a>Style的绑定</h4><p>在vue实例里写上style对象,也可以使用数组绑定多个style(不常用)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;root&quot;</span>&gt;</span><br><span class="line">    <span class="comment">//  </span></span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;basic&quot;</span> <span class="attr">:style</span>=<span class="string">&quot;styleObj&quot;</span> &gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>	</span><br><span class="line">&lt;/div&gt;	</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">new</span> Vue(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">el</span>:<span class="string">&quot;#root&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">data</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">mood</span>:<span class="string">&quot;basic&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">                <span class="attr">styleObj</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">                   <span class="attr">fontSize</span>: <span class="string">&#x27;40px&#x27;</span>, <span class="comment">//需要写成小驼峰</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">                &#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">                <span class="attr">styleObj2</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">                    <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span>  <span class="comment">//两个style对象同时使用可以再 div绑定时用数组链接</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">                    						&lt;div :style=[styleObj,styleObj2]&gt;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">                &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<h3 id="条件渲染"><a href="#条件渲染" class="headerlink" title="条件渲染"></a>条件渲染</h3><h4 id="v-show-v-if"><a href="#v-show-v-if" class="headerlink" title="v-show/v-if"></a>v-show/v-if</h4><p>v-show的值为true 就显示, 反之隐藏(就是 display none)</p>
<p>v-if: “false”  不是单纯的样式改变  结构都没了</p>
<p>**区别:**频繁使用用show 渲染消耗资源,切换不太消耗  if反之</p>
<p><strong>注意</strong>:使用v-if的时候元素可能获取不到,v-show可以,因为只是隐藏</p>
<h4 id="v-else-if-补充-v-if-如果if成功-else-if-不进行判断-减少消耗"><a href="#v-else-if-补充-v-if-如果if成功-else-if-不进行判断-减少消耗" class="headerlink" title="v-else-if: 补充 v-if  如果if成功, else if 不进行判断 减少消耗"></a>v-else-if: 补充 v-if  如果if成功, else if 不进行判断 减少消耗</h4><h4 id="v-else-只要写了else-当if条件不成立时-else必定成功-不写判断内容-写了没用"><a href="#v-else-只要写了else-当if条件不成立时-else必定成功-不写判断内容-写了没用" class="headerlink" title="v-else:只要写了else,当if条件不成立时,else必定成功(不写判断内容,写了没用)"></a>v-else:只要写了else,当if条件不成立时,else必定成功(不写判断内容,写了没用)</h4><p><strong>注意</strong>: 使用if结构 div之间要紧紧挨在一起</p>
<p>当复数个节点需要被隐藏时:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;div v-show=<span class="string">&quot;true&quot;</span>&gt;我是帅哥<span class="number">1</span>&lt;/div&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">&quot;true&quot;</span>&gt;</span>我是帅哥2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">最好使用template包围属性,因为template相较于div不改变结构,只是<span class="string">&#x27;空气&#x27;</span></span><br><span class="line">		&lt;template v-<span class="keyword">if</span>=<span class="string">&quot;true&quot;</span>&gt;<span class="comment">//template不能和v-show联用,非要用请使用div</span></span><br><span class="line">			<span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>我是帅哥1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">			<span class="xml">&lt;div&quot;&gt;我是帅哥2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">		&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<p>template节点不能使用v-show的原因:</p>
<p>v-show原理是dispaly隐藏,但是实际渲染后根本没有template节点,因此无效</p>
<h3 id="列表渲染"><a href="#列表渲染" class="headerlink" title="列表渲染"></a>列表渲染</h3><p><strong>列表的数组渲染</strong>: key默认是0 1 2 value是</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;root&quot;</span>&gt;</span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span>//此时如果写两个参数  (p,k in persons k 就是key值 但是还得写出来)</span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;p in persons&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;p.id&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">				\&#123;&#123;p.name&#125;&#125;-\&#123;&#123;p.age&#125;&#125;</span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">el</span>:<span class="string">&quot;#root&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">data</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">persons</span>:[</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					&#123;<span class="attr">id</span>:<span class="string">&quot;001&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;张三&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					&#123;<span class="attr">id</span>:<span class="string">&quot;002&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;李四&#x27;</span>,<span class="attr">age</span>:<span class="number">19</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					&#123;<span class="attr">id</span>:<span class="string">&quot;003&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;王五&#x27;</span>,<span class="attr">age</span>:<span class="number">20</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				]</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">	</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p><strong>列表的对象渲染</strong>: 和对象一样,唯一不同的是 key的值就是数组的键,value是值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;root&quot;</span>&gt;</span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;val,k in car&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;k&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">			\&#123;&#123;k&#125;&#125;===\&#123;&#123;val&#125;&#125;</span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">el</span>:<span class="string">&quot;#root&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">data</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">car</span>:&#123;<span class="attr">name</span>:<span class="string">&#x27;野马&#x27;</span>,<span class="attr">price</span>:<span class="string">&#x27;41.8w&#x27;</span>,<span class="attr">color</span>:<span class="string">&#x27;大黄蜂&#x27;</span>&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">	</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p><strong>列表的字符串渲染</strong>: key是第几个字符,value是字符(用的少)</p>
<p>代码略</p>
<p><strong>测试遍历指定次数</strong> number是数字  1 2 3 4 5       index是下表 0 1 2 3 4(用的少)</p>
<p>v-for=”(number,index) of 5”//</p>
<h4 id="列表渲染的key值"><a href="#列表渲染的key值" class="headerlink" title="列表渲染的key值"></a>列表渲染的key值</h4><p><strong>key的工作原理:</strong> </p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220124174612552.png" alt="image-20220124174612552"></p>
<p>用index当作key的时候 向最顶端添加一个老刘,此时新的虚拟dom和老的虚拟dom进行对比,也就是Vue的<strong>虚拟Dom DIFF(difference)算法</strong>,此时因为key相等,新的DOM中的value值 <strong>老刘-30</strong> 是新的值,因此加入到了 key是 “0”的 <li>标签中,但又因为 input标签一样,因此input直接转移到了新的 <strong>老刘-30</strong> 内,因为真实DOM已经对 key= “0”的input标签写入了值,因此直接被覆盖到了 老刘的value里</p>
<p>效率也很低,因为每个 dom都是<strong>掉落下来的</strong></p>
<p><strong>想解决以上情况,需要将key绑定为 数组内部对象的 真正的独有key  也就是 p.id!</strong></p>
<p><strong>写v-for  一定要写:KEY 要不然你往上加使用默认key的话全窜了!!!!!!!!!!!!!!!!</strong></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220124175501398.png" alt="image-20220124175501398"></p>
<h4 id="列表的过滤"><a href="#列表的过滤" class="headerlink" title="列表的过滤:"></a>列表的过滤:</h4><p><strong>以监视 watch 为例:</strong></p>
<pre><code>需求:模糊查询
</code></pre>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;<span class="name">input</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入艺人名称&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;keyName&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;p,k in filterPersons&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;p.id&quot;</span> &gt;</span></span></span><br><span class="line"><span class="xml">					\&#123;&#123;p.name&#125;&#125;-\&#123;&#123;p.age&#125;&#125;-\&#123;&#123;p.id&#125;&#125;</span></span><br><span class="line"><span class="xml">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">el</span>:<span class="string">&quot;#root&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">data</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="attr">keyName</span>:<span class="string">&#x27;&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="attr">persons</span>:[</span></span></span><br><span class="line"><span class="javascript"><span class="xml">						&#123;<span class="attr">id</span>:<span class="string">&quot;001&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;马冬梅&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">						&#123;<span class="attr">id</span>:<span class="string">&quot;002&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;周冬雨&#x27;</span>,<span class="attr">age</span>:<span class="number">19</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">						&#123;<span class="attr">id</span>:<span class="string">&quot;003&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;周杰伦&#x27;</span>,<span class="attr">age</span>:<span class="number">20</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">						&#123;<span class="attr">id</span>:<span class="string">&quot;004&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;温兆伦&#x27;</span>,<span class="attr">age</span>:<span class="number">21</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					],</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="attr">filterPersons</span>:[]</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">watch</span>:&#123;<span class="comment">//监听keyName</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">					</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="attr">keyName</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">						<span class="attr">immediate</span>:<span class="literal">true</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">						<span class="function"><span class="title">handler</span>(<span class="params">val</span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">							<span class="built_in">this</span>.filterPersons = <span class="built_in">this</span>.persons.filter(<span class="function">(<span class="params">p</span>)=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">								<span class="built_in">console</span>.log(p.name);</span></span></span><br><span class="line"><span class="javascript"><span class="xml">								<span class="keyword">return</span> p.name.indexOf(val) != -<span class="number">1</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">							&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">						&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">	&lt;/body&gt;</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220124190016876.png" alt="image-20220124190016876"></p>
<p><strong>计算属性写法:</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">	<span class="keyword">new</span> Vue(&#123;</span><br><span class="line">	<span class="attr">el</span>:<span class="string">&quot;#root&quot;</span>,</span><br><span class="line">	<span class="attr">data</span>:&#123;</span><br><span class="line">		<span class="attr">keyName</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">		<span class="attr">persons</span>:[</span><br><span class="line">			&#123;<span class="attr">id</span>:<span class="string">&quot;001&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;马冬梅&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span><br><span class="line">			&#123;<span class="attr">id</span>:<span class="string">&quot;002&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;周冬雨&#x27;</span>,<span class="attr">age</span>:<span class="number">19</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span><br><span class="line">			&#123;<span class="attr">id</span>:<span class="string">&quot;003&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;周杰伦&#x27;</span>,<span class="attr">age</span>:<span class="number">20</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span><br><span class="line">			&#123;<span class="attr">id</span>:<span class="string">&quot;004&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;温兆伦&#x27;</span>,<span class="attr">age</span>:<span class="number">21</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span><br><span class="line">		]</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">computed</span>:&#123;<span class="comment">//使用计算属性</span></span><br><span class="line">		<span class="function"><span class="title">filterPersons</span>(<span class="params"></span>)</span>&#123;<span class="comment">//这个属性接收到了</span></span><br><span class="line">			<span class="keyword">return</span> <span class="built_in">this</span>.persons.filter(<span class="function">(<span class="params">p</span>)=&gt;</span>&#123;<span class="comment">//计算属性必须要有返回值</span></span><br><span class="line">                      <span class="comment">//因为filterPersons是个属性 要有值!!</span></span><br><span class="line">				<span class="keyword">return</span> p.name.indexOf(<span class="built_in">this</span>.keyName) != -<span class="number">1</span></span><br><span class="line">			&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="列表排序"><a href="#列表排序" class="headerlink" title="列表排序"></a>列表排序</h4><p>对已经模糊查询后的列表进行排序按钮操作</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;<span class="name">input</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入艺人名称&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;keyName&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;p,k in filterPersons&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;p.id&quot;</span> &gt;</span></span></span><br><span class="line"><span class="xml">				\&#123;&#123;p.name&#125;&#125;-\&#123;&#123;p.age&#125;&#125;-\&#123;&#123;p.id&#125;&#125;</span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;sortType = 2&quot;</span>&gt;</span>年龄升序<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;sortType = 1&quot;</span>&gt;</span>年龄降序<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;sortType = 0 &quot;</span>&gt;</span>原顺序<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">	<span class="comment">//watch写法</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">	<span class="comment">/* 	const vm = new Vue(&#123;</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">			el:&quot;#root&quot;,</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">			data:&#123;</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">				keyName:&#x27;&#x27;,</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">				persons:[</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">					&#123;id:&quot;001&quot;,name:&#x27;马冬梅&#x27;,age:18,sex:&#x27;女&#x27;&#125;,</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">					&#123;id:&quot;002&quot;,name:&#x27;周冬雨&#x27;,age:19,sex:&#x27;女&#x27;&#125;,</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">					&#123;id:&quot;003&quot;,name:&#x27;周杰伦&#x27;,age:20,sex:&#x27;男&#x27;&#125;,</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">					&#123;id:&quot;004&quot;,name:&#x27;温兆伦&#x27;,age:21,sex:&#x27;男&#x27;&#125;,</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">				],</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">				filterPersons:[]</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">			&#125;,</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">			watch:&#123;//监听keyName</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">				</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">				keyName:&#123;</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">					immediate:true,</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">					handler(val)&#123;</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">						this.filterPersons = this.persons.filter((p)=&gt;&#123;</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">							return p.name.indexOf(val) != -1</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">						&#125;)</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">					&#125;</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">				&#125;</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">			&#125;</span></span></span></span><br><span class="line"><span class="comment"><span class="javascript"><span class="xml">		&#125;) */</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">	<span class="keyword">new</span> Vue(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="attr">el</span>:<span class="string">&quot;#root&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="attr">data</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">keyName</span>:<span class="string">&#x27;&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">sortType</span>:<span class="number">0</span>,<span class="comment">//0原顺序 1降序 2升序</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">persons</span>:[</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#123;<span class="attr">id</span>:<span class="string">&quot;001&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;马冬梅&#x27;</span>,<span class="attr">age</span>:<span class="number">11</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#123;<span class="attr">id</span>:<span class="string">&quot;002&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;周冬雨&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#123;<span class="attr">id</span>:<span class="string">&quot;003&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;周杰伦&#x27;</span>,<span class="attr">age</span>:<span class="number">10</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#123;<span class="attr">id</span>:<span class="string">&quot;004&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;温兆伦&#x27;</span>,<span class="attr">age</span>:<span class="number">21</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			]</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="attr">computed</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">filterPersons</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="keyword">const</span> arr = <span class="built_in">this</span>.persons.filter(<span class="function">(<span class="params">p</span>)=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="keyword">return</span> p.name.indexOf(<span class="built_in">this</span>.keyName) !== -<span class="number">1</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="comment">//判断是否需要排序</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="keyword">if</span>(<span class="built_in">this</span>.sortType)&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					arr.sort(<span class="function">(<span class="params">p1,p2</span>)=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">						<span class="keyword">return</span> <span class="built_in">this</span>.sortType === <span class="number">1</span> ? p2.age-p1.age:p1.age-p2.age</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="keyword">return</span> arr</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">	&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">	</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<h4 id="Vue检测数据原理"><a href="#Vue检测数据原理" class="headerlink" title="Vue检测数据原理"></a>Vue检测数据原理</h4><p>当我们对Vue实例中的属性进行修改时,Vue会帮我们进行数据的操作,当数据被Vue检测时,Vue的开发者模式会对其进行响应,以最常用的方式来举例:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">persons:[</span><br><span class="line">	&#123;<span class="attr">id</span>:<span class="string">&quot;001&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;马冬梅&#x27;</span>,<span class="attr">age</span>:<span class="number">11</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span><br><span class="line">	&#123;<span class="attr">id</span>:<span class="string">&quot;002&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;周冬雨&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>,<span class="attr">sex</span>:<span class="string">&#x27;女&#x27;</span>&#125;,</span><br><span class="line">	&#123;<span class="attr">id</span>:<span class="string">&quot;003&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;周杰伦&#x27;</span>,<span class="attr">age</span>:<span class="number">10</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span><br><span class="line">	&#123;<span class="attr">id</span>:<span class="string">&quot;004&quot;</span>,<span class="attr">name</span>:<span class="string">&#x27;温兆伦&#x27;</span>,<span class="attr">age</span>:<span class="number">21</span>,<span class="attr">sex</span>:<span class="string">&#x27;男&#x27;</span>&#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>以上data中的数组出现时,当使用this.persons[0].name = “马东什么”</p>
<p>Vue会检测到内部数据的变化,并相应到前台</p>
<p>**注意:**若将this.persons[0] ={id:”001”,name:’马冬梅’,age:11,sex:’女’},写进去 <strong>会检测不到</strong></p>
<p><strong>原因: 因为数组中的索引值是没有setter方法的</strong>,因此 persons[0] 去改 Vue检测不到,应该使用数组方法,<strong>例如push,pop,shift,splice,</strong> (filter slice不算,不改变原数组,得自己附一遍值)他已经不是Array.prottype.push原型上的push了,已经被VUE单独用过了,<strong>直接赋值是不行的</strong> 没setter</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220125133703355.png" alt="image-20220125133703355"></p>
<h4 id="Vue如何检测对象属性的改变"><a href="#Vue如何检测对象属性的改变" class="headerlink" title="Vue如何检测对象属性的改变"></a>Vue如何检测对象属性的改变</h4><p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220125095339323.png" alt="image-20220125095339323"></p>
<p><strong>修改data的name时,会引起 _data中的setter name 调用并重新解析模板</strong></p>
<h4 id="Vue-set的使用"><a href="#Vue-set的使用" class="headerlink" title="Vue.set的使用"></a>Vue.set的使用</h4><p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220125122012406.png" alt="image-20220125122012406"></p>
<p>在这种情况下,使用 vm._data.student.sex = “男” 这种情况,由于sex是额外加入的,因此不具备 get set方法,因此不能使用响应式页面的特点,从而不会显示在页面上 重点:<strong>必须要有set!!!</strong></p>
<p>如果想强行使用,<strong>需要用 Vue.set方法</strong></p>
<p><strong>方法1:Vue.set(vm._data.student,’sex’,’男’)</strong> //使用数据代理的data可以直接写成<strong>vm.student 简化</strong></p>
<pre><code>写在方法里直接 Vue.set(this.student,&quot;sex&quot;,&#39;男&#39;)就完了 但是还有局限,Vue.set(vm.student.hobby,1,&#39;XXX&#39;)          这样也行
</code></pre>
<p><strong>方法2:vm.$set(vm._data.student,’sex’,’男’)</strong></p>
<p>练习:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;button @click=<span class="string">&quot;student.age++&quot;</span>&gt;年龄+<span class="number">1</span>岁&lt;<span class="regexp">/button&gt; &lt;br/</span>&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addSex&quot;</span>&gt;</span>添加性别属性，默认值：男<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;student.sex = &#x27;未知&#x27; &quot;</span>&gt;</span>修改性别<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addFriend&quot;</span>&gt;</span>在列表首位添加一个朋友<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;updateFirstFriendName&quot;</span>&gt;</span>修改第一个朋友的名字为：张三<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addHobby&quot;</span>&gt;</span>添加一个爱好<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;updateHobby&quot;</span>&gt;</span>修改第一个爱好为：开车<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;removeSmoke&quot;</span>&gt;</span>过滤掉爱好中的抽烟<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line">      <span class="xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>姓名：\&#123;&#123;student.name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>年龄：\&#123;&#123;student.age&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">&quot;student.sex&quot;</span>&gt;</span>性别：\&#123;&#123;student.sex&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>爱好：<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(h,index) in student.hobby&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">		\&#123;&#123;h&#125;&#125;</span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>朋友们：<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(f,index) in student.friends&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">	\&#123;&#123;f.name&#125;&#125;--\&#123;&#123;f.age&#125;&#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p><strong>Vue监视数据的原理总结：</strong></p>
<ol>
<li><p>vue会监视data中所有层次的数据。</p>
</li>
<li><p>如何监测对象中的数据？<br>通过setter实现监视，且要在new Vue时就传入要监测的数据。<br>(1).对象中后追加的属性，Vue默认不做响应式处理                        </p>
</li>
</ol>
<p>  (2).如需给后添加的属性做响应式，请使用如下API：<br>  Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)</p>
<ol start="3">
<li>如何监测数组中的数据？<br>通过包裹数组更新元素的方法实现，本质就是做了两件事：</li>
</ol>
<p>  (1).调用原生对应的方法对数组进行更新。                            </p>
<p>  (2).重新解析模板，进而更新页面。<br>  4.在Vue修改数组中的某个元素一定要用如下方法：<br>  1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()<br>  2.Vue.set() 或 vm.$set()<br>  特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！</p>
<h3 id="Vue的表单数据绑定v-model的细节"><a href="#Vue的表单数据绑定v-model的细节" class="headerlink" title="Vue的表单数据绑定v-model的细节"></a>Vue的表单数据绑定v-model的细节</h3><pre><code>    在之前的学习过程中,v-model可以将数据绑定至我们的vue实例vm中的_data中,并通过数据代    理,可以直接写在 data&#123;&#125;内,但是**必须是拥有value的属性才可以直接绑定**,因此表单其他元素的绑定    是如何实现的呢?
</code></pre>
<ol>
<li><p>input type=”text”  输入框: 输入的值就是value,绑定的数据是字符串形式,例如 account:’ ‘</p>
</li>
<li><p>input type=”radio”单选框:选中的值是value 如果不写,绑定的是checked的布尔值</p>
</li>
<li><p>input type=”checkBox” 多选框:同单选一样,但是一定要把绑定的值写成数组类型,否则点一下全变成true,只会绑定checked的布尔值,不论是否添加value</p>
</li>
<li><p>select : 下拉列表,写上value 其余没啥可说的</p>
</li>
<li><p>textarea:文本域.输入啥就是value</p>
</li>
<li><p>引申一个 input type = “number”   然后v-model.number=”XXX”  可以向data传入数字类型,防止转换为josn传入数据库时出错</p>
<p>以下为练习代码:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line">	&lt;div id=<span class="string">&quot;root&quot;</span>&gt;</span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>学生信息<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;student.age++&quot;</span>&gt;</span>年龄+1岁<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addSex&quot;</span>&gt;</span>添加性别属性，默认值：男<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;student.sex = &#x27;未知&#x27; &quot;</span>&gt;</span>修改性别<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addFriend&quot;</span>&gt;</span>在列表首位添加一个朋友<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;updateFirstFriendName&quot;</span>&gt;</span>修改第一个朋友的名字为：张三				<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;addHobby&quot;</span>&gt;</span>添加一个爱好<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;updateHobby&quot;</span>&gt;</span>修改第一个爱好为：开车<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;removeSmoke&quot;</span>&gt;</span>过滤掉爱好中的抽烟<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span> <span class="xml"><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>姓名：\&#123;&#123;student.name&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>年龄：\&#123;&#123;student.age&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">&quot;student.sex&quot;</span>&gt;</span>性别：\&#123;&#123;student.sex&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>爱好：<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(h,index) in student.hobby&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">				\&#123;&#123;h&#125;&#125;</span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>朋友们：<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">		<span class="xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(f,index) in student.friends&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">				\&#123;&#123;f.name&#125;&#125;--\&#123;&#123;f.age&#125;&#125;</span></span><br><span class="line"><span class="xml">			<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">   </span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">	Vue.config.productionTip = <span class="literal">false</span> <span class="comment">//阻止 vue 在启动时生成生产提示。</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">   </span></span></span><br><span class="line"><span class="javascript"><span class="xml">	<span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="attr">data</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">student</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">name</span>:<span class="string">&#x27;tom&#x27;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">age</span>:<span class="number">18</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">hobby</span>:[<span class="string">&#x27;抽烟&#x27;</span>,<span class="string">&#x27;喝酒&#x27;</span>,<span class="string">&#x27;烫头&#x27;</span>],</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">friends</span>:[</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					&#123;<span class="attr">name</span>:<span class="string">&#x27;jerry&#x27;</span>,<span class="attr">age</span>:<span class="number">35</span>&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					&#123;<span class="attr">name</span>:<span class="string">&#x27;tony&#x27;</span>,<span class="attr">age</span>:<span class="number">36</span>&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				]</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="attr">methods</span>: &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">addSex</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="comment">// Vue.set(this.student,&#x27;sex&#x27;,&#x27;男&#x27;)</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="built_in">this</span>.$set(<span class="built_in">this</span>.student,<span class="string">&#x27;sex&#x27;</span>,<span class="string">&#x27;男&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">addFriend</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="built_in">this</span>.student.friends.unshift(&#123;<span class="attr">name</span>:<span class="string">&#x27;jack&#x27;</span>,<span class="attr">age</span>:<span class="number">70</span>&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">updateFirstFriendName</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="built_in">this</span>.student.friends[<span class="number">0</span>].name = <span class="string">&#x27;张三&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">addHobby</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="built_in">this</span>.student.hobby.push(<span class="string">&#x27;学习&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">updateHobby</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="comment">// this.student.hobby.splice(0,1,&#x27;开车&#x27;)</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="comment">// Vue.set(this.student.hobby,0,&#x27;开车&#x27;)</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="built_in">this</span>.$set(<span class="built_in">this</span>.student.hobby,<span class="number">0</span>,<span class="string">&#x27;开车&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">removeSmoke</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="built_in">this</span>.student.hobby = <span class="built_in">this</span>.student.hobby.filter(<span class="function">(<span class="params">h</span>)=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="keyword">return</span> h !== <span class="string">&#x27;抽烟&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">	&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></li>
</ol>
<p><strong>注意以下几个修饰符</strong>:</p>
<pre><code>v-model.number 转换为纯数字,防止数字类型的数据导入到数据库变成字符串

v-model.lazy 懒加载(不是真正的懒加载),失去光标时才绑定,不是实时按一下变一下

v-model.trim 去掉前后空格
</code></pre>
<h3 id="其他v-指令"><a href="#其他v-指令" class="headerlink" title="其他v-指令"></a>其他v-指令</h3><ol>
<li><p><strong>v-text :</strong> 向指定节点中插入内容,但是遇到标签不解析,只是插入文字</p>
</li>
<li><p><strong>v-html:</strong> 向指定节点中渲染包含html结构的内容</p>
<pre><code>与插值语法的区别: 
</code></pre>
<ol>
<li><p>v-html会替换掉节点中的所有内容,&lt;!–swig￼121–&gt;不会 ,不太灵活</p>
</li>
<li><p>v-html可以识别HTML结构</p>
<p>注意!  随便在网站动态渲染HTML非常危险,容易导致XSS(冒充用户之手)cookie攻击</p>
<p>一定要在可信的内容上使用V-HTML 永远不要用在用户提交的内容上</p>
</li>
</ol>
</li>
<li><p><strong>v-cloak:</strong> 当vue介入之后 被删除此属性, 目的是当结构跑到页面之前.用属性选择器[v-cloak]选中并使用 display:none使其不可见 </p>
</li>
<li><p><strong>v-once:</strong> 只调用1次</p>
</li>
<li><p><strong>v-pre:</strong> 跳过vue解析,例如<strong>没有使用指令语法,没有使用插值语法的节点</strong>,跳过去,程序会变快</p>
</li>
</ol>
<h3 id="自定义指令"><a href="#自定义指令" class="headerlink" title="自定义指令"></a>自定义指令</h3><p>一、定义语法：</p>
<pre><code>        (1).**局部指令：**

                    new Vue(&#123;                                                        new Vue(&#123;

                            directives:&#123;指令名:配置对象&#125;                        directives&#123;指令名:回调函数&#125;

                    &#125;)                                                                         &#125;)

        (2).**全局指令：**

                Vue.directive(指令名,配置对象) 或  Vue.directive(指令名,回调函数) 
</code></pre>
<p>二、配置对象中常用的3个回调：</p>
<pre><code>            (1).bind：指令与元素成功绑定时调用。

            (2).inserted：指令所在元素被插入页面时调用。

            (3).update：指令所在模板结构被重新解析时调用。
</code></pre>
<p>三、备注：</p>
<pre><code>        1.指令定义时不加v-，但使用时要加v-；

        2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
</code></pre>
<p>​    </p>
<pre><code>需求1:定义一个 v-big指令,和v-text功能类似,但会把绑定的数值放大10倍

需求2:定义一个v-fbind,类似于v-bind,但可以让绑定的input元素默认获取焦点
</code></pre>
<p>完成上述需求,需要使用一个新的配置项,<strong>directives</strong>:{big:} 其中的big可以写成对象形式或者函数形式,一般的,当不需要操作细节时,使用函数就可以了,但是需求2这种有细节的,需要用数组解决</p>
<p><strong>element的值</strong> 是元素 <strong><span></span></strong>  <strong>是真实DOM</strong></p>
<p><strong>binding绑定的值是 “n”</strong>  是一个对象, <strong>name是big</strong> ,<strong>rawName是v-big,value是n的值</strong> 等等</p>
<p><strong>big指令什么时候会被调用?</strong> </p>
<ol>
<li><pre><code>与元素成功绑定时(一上来)
</code></pre>
</li>
<li><pre><code>指令所在模板重新解析时
</code></pre>
</li>
</ol>
<ul>
<li><pre><code>需求1的代码
</code></pre>
</li>
</ul>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;span v-big=<span class="string">&quot;n&quot;</span>&gt;&lt;/span&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>:<span class="string">&quot;root&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:&#123;</span><br><span class="line">        <span class="attr">n</span>:<span class="number">1</span></span><br><span class="line">    &#125;</span><br><span class="line">   	<span class="attr">directives</span>:&#123;</span><br><span class="line">		<span class="function"><span class="title">big</span>(<span class="params">element,binding</span>)</span>&#123;<span class="comment">//千万不要像计算属性一样使用return接收数值 要用传参</span></span><br><span class="line">			element.innerText=binding.value*<span class="number">10</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><p>需求2 再用需求1的代码会出问题,因为必须现有input再使用.focus才能实现聚焦,<strong>使用方法传参的方式在(一上来)就调用fbind指令,这时候input还只是个模板,虽然写了,但是得先经过Vue编译。编译的第一步就是指令与元素绑定,在这个瞬间只有模板没有值</strong>。当重新解析时,再次调用fbind,此时input已经出现到页面上,因此就没问题了</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">&quot;text&quot;</span> v-fbind:value=<span class="string">&quot;n&quot;</span>&gt;</span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>:<span class="string">&quot;root&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:&#123;</span><br><span class="line">        <span class="attr">n</span>:<span class="number">1</span></span><br><span class="line">    &#125;</span><br><span class="line">   	<span class="attr">directives</span>:&#123;</span><br><span class="line">		<span class="attr">fbind</span>:&#123;</span><br><span class="line">    		<span class="comment">//指令与元素绑定时调用(一上来)</span></span><br><span class="line">    		<span class="function"><span class="title">bind</span>(<span class="params">element,binding</span>)</span>&#123;</span><br><span class="line">    			element.value = binding.value</span><br><span class="line">			&#125;,</span><br><span class="line">    		<span class="comment">//指令所在元素被插入页面时(focus案例)</span></span><br><span class="line">    		<span class="function"><span class="title">inserted</span>(<span class="params">element,binding</span>)</span>&#123;</span><br><span class="line">                element.focus()</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="comment">//指令所在的模板被重新解析时(如果不写的话,点别的就没了,因此更新和绑定一样)</span></span><br><span class="line">            <span class="function"><span class="title">update</span>(<span class="params">element,binding</span>)</span>&#123;</span><br><span class="line">                element.value = binding.value</span><br><span class="line">            &#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>bind的逻辑往往和update时一样的</strong>,因此简写方式(方法形式)就是不写inserted(生命周期钩子)</p>
</li>
</ul>
<h4 id="如何将自定义指令变成全局"><a href="#如何将自定义指令变成全局" class="headerlink" title="如何将自定义指令变成全局"></a>如何将自定义指令变成全局</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">使用Vue.directive(<span class="string">&#x27;fbind&#x27;</span>,&#123;fbind的内容粘过来&#125;)</span><br></pre></td></tr></table></figure>

<p>原来vue实例里的就可以注掉了</p>
<h3 id="Vue生命周期"><a href="#Vue生命周期" class="headerlink" title="Vue生命周期"></a>Vue生命周期</h3><p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="F:\尚硅谷Vue技术全家桶（天禹老师主讲）\资料（含课件）\02_原理图\生命周期.png" alt="生命周期"></p>
<p>关于生命周期钩子:</p>
<pre><code>    1.mounted:发送ajax请求,启动定时器,绑定自定义事件,订阅消息等[初始化]

    2.beforeDestory : 清楚定时器,解绑自定义时间,取消订阅消息等[收尾工作]
</code></pre>
<p>关于销毁Vue实例</p>
<pre><code>    1.销毁后Vue开发者工具看不到任何信息

    2.销毁后自定义事件会失效,但是原生Dom事件依旧有效

    3.一般不会再beforeDestory操作数据,因为即使操作也不会出发更新流程了(更新都过去了)
</code></pre>
<h3 id="Vue组件化"><a href="#Vue组件化" class="headerlink" title="Vue组件化"></a>Vue组件化</h3><pre><code>组件化能让前端代码的编写变得更高效
</code></pre>
<p><strong>以下是传统的前端编写</strong></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220129092704331.png" alt="image-20220129092704331"></p>
<p><strong>以下是Vue的组件化编写</strong></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220129092736308.png" alt="image-20220129092736308"></p>
<h4 id="非单文件组件和单文件组件"><a href="#非单文件组件和单文件组件" class="headerlink" title="非单文件组件和单文件组件"></a>非单文件组件和单文件组件</h4><pre><code>**非单: 一个文件中包含N个组件    a.html中有四五个组件**

**单文件组件: 一个文件中包含一个组件  a.vue只有一个组件**(开发用这个,条理清晰,代码好维护)
</code></pre>
<h4 id="组件创建的三个步骤"><a href="#组件创建的三个步骤" class="headerlink" title="组件创建的三个步骤"></a>组件创建的三个步骤</h4><ol>
<li><h5 id="创建组件"><a href="#创建组件" class="headerlink" title="创建组件"></a>创建组件</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> school = Vue.extend(&#123;</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt;</span></span><br><span class="line"><span class="string">			&lt;h2&gt;我是school组件里的学校名称\&#123;&#123;schoolName&#125;&#125;&lt;/h2&gt;</span></span><br><span class="line"><span class="string">		&lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span>,</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">schoolName</span>:<span class="string">&#x27;沈阳理工大学&#x27;</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line">   </span><br><span class="line">   </span><br><span class="line">   简单写法:   写成对象</span><br><span class="line">	<span class="keyword">const</span> school = &#123;</span><br><span class="line">           <span class="attr">template</span>:</span><br><span class="line">           <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">       &#125;</span><br></pre></td></tr></table></figure></li>
<li><p><strong>注册组件</strong></p>
<ol>
<li><p>局部注册</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">	<span class="attr">el</span>:<span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">    <span class="comment">//全新的配置项</span></span><br><span class="line">	components&#123;</span><br><span class="line">    	<span class="attr">xuexiao</span>:school<span class="comment">//因为school和上边创建组件名称一样 因此school:school可以简写成一个</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//el用来指定容器 但是由于各个组件都创建了属于自己的vue属性,因此components中存放各个单独的组件</span></span><br></pre></td></tr></table></figure></li>
<li><p>全局注册</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">&#x27;school&#x27;</span>,xuexiao)</span><br></pre></td></tr></table></figure></li>
</ol>
</li>
<li><h5 id="使用组件"><a href="#使用组件" class="headerlink" title="使用组件"></a>使用组件</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;xuexiao&gt;&lt;/xuexiao&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
<p>例子如下</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;	</span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="comment">&lt;!-- 3.使用组件 --&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;<span class="name">xuexiao</span>&gt;</span><span class="tag">&lt;/<span class="name">xuexiao</span>&gt;</span>组件应用成功</span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root2&quot;</span>&gt;</span></span></span><br><span class="line"><span class="xml">		</span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="comment">//1.创建组件</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">const</span> school = Vue.extend(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">template</span>:<span class="string">`</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">				&lt;div&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">					&lt;h2&gt;我是school组件里的学校名称\&#123;&#123;schoolName&#125;&#125;&lt;/h2&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">				&lt;/div&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">			`</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="attr">schoolName</span>:<span class="string">&#x27;沈阳理工大学&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="comment">//2.1注册组件(全局)</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		Vue.component(<span class="string">&#x27;xuexiao&#x27;</span>,school)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">new</span> Vue(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">el</span>:<span class="string">&quot;#root&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="comment">//2.2注册组件(局部)</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">			 <span class="attr">components</span>:&#123;<span class="attr">xuexiao</span>:school&#125; </span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;)	</span></span></span><br><span class="line"><span class="javascript"><span class="xml">	</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">&lt;/body&gt;</span><br></pre></td></tr></table></figure>

<h4 id="组件的嵌套"><a href="#组件的嵌套" class="headerlink" title="组件的嵌套"></a>组件的嵌套</h4><p>所有的组件都集合在 这个app的组件里,然后分成若干个</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="comment">//1.创建多个组件</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">const</span> student = &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">template</span>:<span class="string">`</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">				&lt;div&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">					&lt;h2&gt;我是学校的子组件学生++++\&#123;&#123;student&#125;&#125;&lt;/h2&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">				&lt;/div&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">			`</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="attr">student</span>:<span class="string">&#x27;李世龙&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;,			</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">const</span> school = Vue.extend(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">template</span>:<span class="string">`</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">				&lt;div&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">					&lt;h2&gt;我是school组件里的学校名称+++++\&#123;&#123;schoolName&#125;&#125;&lt;/h2&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">					&lt;student&gt;&lt;/student&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">				&lt;/div&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">			`</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="attr">schoolName</span>:<span class="string">&#x27;沈阳理工大学&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">components</span>:&#123;student&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">const</span> hello = Vue.extend(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">template</span>:<span class="string">`</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">				&lt;div&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">					&lt;h2&gt;我是hello中的++++\&#123;&#123;word&#125;&#125;&lt;/h2&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">				&lt;/div&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">			`</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">					<span class="attr">word</span>:<span class="string">&#x27;hahhhhhh&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">				&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">const</span> app = &#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">template</span>:<span class="string">`&lt;div&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">						&lt;school&gt;&lt;/school&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">						&lt;hello&gt;&lt;/hello&gt;</span></span></span></span><br><span class="line"><span class="string"><span class="javascript"><span class="xml">					&lt;/div&gt;`</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">components</span>:&#123;school,hello&#125;			</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="keyword">new</span> Vue(&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">el</span>:<span class="string">&quot;#root&quot;</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="attr">template</span>:<span class="string">`&lt;app&gt;&lt;/app&gt;`</span>,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			 <span class="attr">components</span>:&#123;app&#125; </span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;)	</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		</span></span></span><br><span class="line"><span class="javascript"><span class="xml">	</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">&lt;/body&gt;</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220129201120065.png" alt="image-20220129201120065"></p>
<h4 id="VueComponent-vc-组件的实例对象"><a href="#VueComponent-vc-组件的实例对象" class="headerlink" title="VueComponent(vc) 组件的实例对象"></a>VueComponent(vc) 组件的实例对象</h4><p>关于VueComponent</p>
<ol>
<li><pre><code>school组件本质是一个名为VC的构造函数,不是程序员定义的 是Vue.extend
</code></pre>
</li>
<li><pre><code>我们只需要写 &lt;school&gt;&lt;/school&gt;  或者 &lt;school&gt; Vue解析的时候会帮助创建School的实例对象,也就    是Vue帮我们执行的 new VueComponent(options)
</code></pre>
</li>
<li><pre><code>特别注意: 每次调用 Vue.extend,返回的都是一个全新的VueComponent!!!!
</code></pre>
</li>
<li><p> 关于this的指向</p>
<pre><code>           **(1) 组件配置中:**

                   data函数,methods中的函数,watch中的的函数,computed中的函数 他们的this都是                                                    **VueComponent的实例对象**

           **(2) vue实例中:**

                   data函数,methods中的函数,watch中的的函数,computed中的函数 他们的this都是                                                    **Vue的实例对象**
</code></pre>
</li>
<li><p>VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。</p>
</li>
</ol>
<h4 id="VueComponent与Vue实例的区别"><a href="#VueComponent与Vue实例的区别" class="headerlink" title="VueComponent与Vue实例的区别"></a>VueComponent与Vue实例的区别</h4><ul>
<li>vm:有 el表达式,data可以随便写</li>
<li>vc: 不能写el表达式,听vm的,data必须写函数式</li>
</ul>
<h3 id="JavaScript中的原型复习"><a href="#JavaScript中的原型复习" class="headerlink" title="JavaScript中的原型复习"></a>JavaScript中的原型复习</h3><pre><code>首先创建一个构造函数并创建一个Demo实例对象
</code></pre>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Demo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.a = <span class="number">1</span></span><br><span class="line">    <span class="built_in">this</span>.b = <span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> d = <span class="keyword">new</span> Demo()</span><br><span class="line">clog(Demo.prototype)<span class="comment">//显示原型属性</span></span><br><span class="line">clog(d.__proto__)<span class="comment">//隐式原型属性</span></span><br><span class="line"><span class="comment">//以上的函数的或者实例的 都指向一个对象 也就是原型对象</span></span><br></pre></td></tr></table></figure>

<p>​    </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">我们在原型对象上添加一个 属性x</span><br><span class="line">Demo.prototype.x = <span class="number">99</span></span><br></pre></td></tr></table></figure>

<p>一般的,程序员通过 函数的显示原型属性 向原型存数据 </p>
<p>然后程序在像下方代码一样的操作拿到属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(d.x)<span class="comment">//d.__proto__.x</span></span><br></pre></td></tr></table></figure>

<h4 id="VC和VM的内置关系"><a href="#VC和VM的内置关系" class="headerlink" title="VC和VM的内置关系"></a>VC和VM的内置关系</h4><ol>
<li><p>VueComponent.prototype.<strong><strong>proto</strong></strong> ===Vue.prototype    <strong>为啥多个proto  看图</strong> 都指向Vue的原型</p>
</li>
<li><p>图解Vue与VueComponent的关系</p>
<p><strong>黄线的目的是让VC拿到Vue原型对象的属性,这是Vue自己弄的</strong></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220130100502319.png" alt="image-20220130100502319"></p>
</li>
</ol>
<h3 id="单文件组件"><a href="#单文件组件" class="headerlink" title="单文件组件"></a>单文件组件</h3><p>以 vue结尾的文件,相当于单一组件 并通过脚手架编译成JS  webpack也行 但是Vue-cli帮咱用wbpk弄好了</p>
<p><strong>如何创建一个新的vue单文件组件</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">==========================template部分 编写网页模板=========================================</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;demo&quot;</span>&gt;</span>我是school组件里的学校名称\&#123;&#123;schoolName&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="xml">		<span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;showName&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">==========================数据方法部分 需要暴露才能用=========================================</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">	<span class="comment">/* 组件交互相关的代码(数据方法等等) */</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">	<span class="comment">//1.创建组件</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">	<span class="keyword">export</span> <span class="keyword">default</span> &#123;<span class="comment">//暴露组件内容,推荐默认暴露  引入方便</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="attr">name</span>:<span class="string">&#x27;School&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="keyword">return</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				<span class="attr">schoolName</span>:<span class="string">&#x27;沈阳理工大学&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;,</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		<span class="attr">methods</span>:&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			<span class="function"><span class="title">showName</span>(<span class="params"></span>)</span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">				alert(<span class="built_in">this</span>.schoolName)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">			&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">		&#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">	&#125;	</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">=================================样式部分==================================================</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span></span><br><span class="line"><span class="css"><span class="xml">	<span class="comment">/* 组件的样式 */</span></span></span></span><br><span class="line"><span class="css"><span class="xml">	<span class="selector-class">.demo</span>&#123;</span></span></span><br><span class="line"><span class="css"><span class="xml">		<span class="attribute">color</span>: <span class="number">#00FFFF</span>;</span></span></span><br><span class="line"><span class="css"><span class="xml">	&#125;</span></span></span><br><span class="line"><span class="css"><span class="xml"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>如何使用单文件组件</strong></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220130115857593.png" alt="image-20220130115857593"></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220130120317768.png" alt="image-20220130120317768"></p>
<h3 id="Vue脚手架"><a href="#Vue脚手架" class="headerlink" title="Vue脚手架"></a>Vue脚手架</h3><p>===</p>
<p>===</p>
<p>===</p>
<p>===</p>
<h3 id="Render函数"><a href="#Render函数" class="headerlink" title="Render函数"></a>Render函数</h3><p>由于脚手架中import 的vue没有模板解析器,又不可能总自己弄,因此再 Main.js中,存在了<strong>render</strong>这个函数(渲染)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">render:<span class="function"><span class="params">h</span>=&gt;</span>h(App) 这是Main.js中的render</span><br><span class="line"></span><br><span class="line">为什么这么写:</span><br><span class="line"><span class="function"><span class="title">render</span>(<span class="params">createElement</span>)</span>&#123;    </span><br><span class="line">    <span class="keyword">return</span> createElement(<span class="string">&#x27;h1&#x27;</span>,<span class="string">&#x27;哈哈哈哈哈&#x27;</span>) </span><br><span class="line">    在main.js中写这个 可以跳过模板解析器 让template 用另一种方式实现</span><br><span class="line">&#125;</span><br><span class="line">精简一点</span><br><span class="line"><span class="attr">render</span>:<span class="function"><span class="params">createElement</span> =&gt;</span> createElement(<span class="string">&#x27;h1&#x27;</span>,<span class="string">&#x27;哈哈哈哈哈&#x27;</span>) </span><br><span class="line">再精简</span><br><span class="line"><span class="attr">render</span>:<span class="function"><span class="params">h</span> =&gt;</span> h(<span class="string">&#x27;h1&#x27;</span>,<span class="string">&#x27;哈哈哈哈哈&#x27;</span>) 将内容变成App这个变量, 上边 <span class="keyword">import</span> 了App  因此组件就被渲染了</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="ref属性"><a href="#ref属性" class="headerlink" title="ref属性"></a><strong>ref属性</strong></h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">this</span>.$refs.ref可以拿到虚拟Dom</span><br><span class="line">在组件标签上使用要比id选取更好</span><br></pre></td></tr></table></figure>

<h4 id="Props属性"><a href="#Props属性" class="headerlink" title="Props属性"></a>Props属性</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">当我们想对组件进行复用时,data的数据改变,其余不变,只需要使用props属性就行</span><br><span class="line">&lt;h2&gt;学生姓名:\&#123;&#123;name&#125;&#125;&lt;/h2&gt;</span><br><span class="line"><span class="comment">//name找的是props里 父级传过来的值</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&#x27;student&#x27;</span>,</span><br><span class="line">    <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span>&#123;</span><br><span class="line">            <span class="attr">msg</span>:<span class="string">&#x27;我是李老板的人&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//**简单声明接收**</span></span><br><span class="line">   	<span class="attr">props</span>:[<span class="string">&#x27;name&#x27;</span>,<span class="string">&#x27;age&#x27;</span>,<span class="string">&#x27;sex&#x27;</span>]</span><br><span class="line">    <span class="comment">//对象接收(限制数据类型)</span></span><br><span class="line">    <span class="attr">props</span>:&#123;</span><br><span class="line">    	<span class="attr">name</span>:<span class="built_in">String</span>,</span><br><span class="line">    	<span class="attr">age</span>:<span class="built_in">Number</span>,</span><br><span class="line">    	<span class="attr">sex</span>:<span class="built_in">String</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">==================================</span><br><span class="line">    在父级组件上可以直接写了</span><br><span class="line">&lt;template&gt;</span><br><span class="line">	<span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    	<span class="tag">&lt;<span class="name">Student</span> <span class="attr">name</span>=<span class="string">&quot;李四&quot;</span> <span class="attr">sex</span>=<span class="string">&quot;女&quot;</span> <span class="attr">:age</span>=<span class="string">&quot;18&quot;</span>/&gt;</span>//这里加一个v-bind 让 引号里变成表达式数字</span></span><br><span class="line"><span class="xml">            //可以直接传到props里的数据,然后显示在模板上</span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>    </span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<p>三种接收方式</p>
<ol>
<li><p><strong>简单声明接收</strong><br>props:[‘name’,’age’,’sex’]</p>
</li>
<li><p><strong>对象接收(限制数据类型)</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">props:&#123;</span><br><span class="line">    name:String,</span><br><span class="line">    age:Number,</span><br><span class="line">    sex:String</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p><strong>复杂接收(类型+必要性+默认值)</strong>{</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">props:&#123;</span><br><span class="line">	<span class="attr">name</span>:&#123;</span><br><span class="line">		<span class="attr">type</span>:<span class="built_in">String</span>,<span class="comment">//限制类型</span></span><br><span class="line">        <span class="attr">required</span>:<span class="literal">true</span>,<span class="comment">//是否必要</span></span><br><span class="line">        <span class="attr">default</span>:<span class="number">99</span>  <span class="comment">//不填默认添加</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="利用props向父元素传值"><a href="#利用props向父元素传值" class="headerlink" title="利用props向父元素传值"></a>利用props向父元素传值</h4><p><strong>父传子  父写东西 子直接props</strong></p>
<p><strong>子传父  父先向子传一个方法 子自己写个方法把调用父方法的同时传自己的参</strong></p>
<p>父元素写的:</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220205094854549.png" alt="image-20220205094854549"></p>
<p>子元素写的</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220205094923567.png" alt="image-20220205094923567"></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220205094934255.png" alt="image-20220205094934255"></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220205094943762.png" alt="image-20220205094943762"></p>
<h4 id="mixin-混入"><a href="#mixin-混入" class="headerlink" title="mixin 混入"></a>mixin 混入</h4><p>当两个组件有相同代码 比如说方法,就可以拿出来通过混入进行操作          <strong>复用配置</strong></p>
<p>使用方式:</p>
<pre><code>第一步定义混合,例如:
</code></pre>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> hunhe=&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;......&#125;</span><br><span class="line">	<span class="attr">methods</span>:&#123;.....&#125;</span><br><span class="line">    ......</span><br><span class="line">&#125;</span><br><span class="line">    </span><br><span class="line"><span class="attr">mixin</span>:[hunhe]</span><br></pre></td></tr></table></figure>

<p>混合里可以混合任意配置项</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220201180156564.png" alt="image-20220201180156564"></p>
<p>当向data加入一些数据时,可以添加到原来data里,不会替换内容,方法什么的也不会破坏原来的结构</p>
<p><strong>全局混合</strong>  在 main.js引入混合,全局都能用</p>
<h3 id="Scoped样式"><a href="#Scoped样式" class="headerlink" title="Scoped样式"></a>Scoped样式</h3><p>组件的style最后会汇总到一起,所以一个 scoped 让他只能改变自己组件的样式</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;style scoped&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>但是在App中,如果加scoped只能给app中的 基础标签加,失去了意义,因此App不加scoped</p>
<h3 id="经典案例-记事本"><a href="#经典案例-记事本" class="headerlink" title="经典案例 记事本"></a>经典案例 记事本</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">略</span><br></pre></td></tr></table></figure>



<h3 id="自定义组件"><a href="#自定义组件" class="headerlink" title="自定义组件"></a>自定义组件</h3><p>类似于onclick 这种用于 h标签中的, 自定义组件用于组件里 写在v-on=”clicks”  那个 clicks 是自定义组件</p>
<p><strong><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220205122850507.png" alt="image-20220205122850507"></strong></p>
<p>两种自定义事件的方式</p>
<p>方式1:</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220205122931168.png" alt="image-20220205122931168"></p>
<p>方式2:</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220205122914462.png" alt="image-20220205122914462"></p>
<p>方式2更灵活一点点 可以定时器</p>
<h4 id="补充-如果只想触发一次-once-v-once"><a href="#补充-如果只想触发一次-once-v-once" class="headerlink" title="补充:如果只想触发一次,$once  v-once"></a>补充:如果只想触发一次,$once  v-once</h4><h4 id="自定义组件解绑"><a href="#自定义组件解绑" class="headerlink" title="自定义组件解绑"></a>自定义组件解绑</h4><p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220205134652124.png" alt="image-20220205134652124"></p>
<p>当使用 this.$destroy()时,vc都没了 组件也没了 子组件及子组件的自定义事件也没了</p>
<h1 id="笔记"><a href="#笔记" class="headerlink" title="笔记"></a>笔记</h1><h2 id="脚手架文件结构"><a href="#脚手架文件结构" class="headerlink" title="脚手架文件结构"></a>脚手架文件结构</h2><pre><code>├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
</code></pre>
<h2 id="关于不同版本的Vue"><a href="#关于不同版本的Vue" class="headerlink" title="关于不同版本的Vue"></a>关于不同版本的Vue</h2><ol>
<li>vue.js与vue.runtime.xxx.js的区别：<ol>
<li>vue.js是完整版的Vue，包含：核心功能 + 模板解析器。</li>
<li>vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。</li>
</ol>
</li>
<li>因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。</li>
</ol>
<h2 id="vue-config-js配置文件"><a href="#vue-config-js配置文件" class="headerlink" title="vue.config.js配置文件"></a>vue.config.js配置文件</h2><ol>
<li>使用vue inspect &gt; output.js可以查看到Vue脚手架的默认配置。</li>
<li>使用vue.config.js可以对脚手架进行个性化定制，详情见：<a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh">https://cli.vuejs.org/zh</a></li>
</ol>
<h2 id="ref属性-1"><a href="#ref属性-1" class="headerlink" title="ref属性"></a>ref属性</h2><ol>
<li>被用来给元素或子组件注册引用信息（id的替代者）</li>
<li>应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）</li>
<li>使用方式：<ol>
<li>打标识：<code>&lt;h1 ref=&quot;xxx&quot;&gt;.....&lt;/h1&gt;</code> 或 <code>&lt;School ref=&quot;xxx&quot;&gt;&lt;/School&gt;</code></li>
<li>获取：<code>this.$refs.xxx</code></li>
</ol>
</li>
</ol>
<h2 id="props配置项"><a href="#props配置项" class="headerlink" title="props配置项"></a>props配置项</h2><ol>
<li><p>功能：让组件接收外部传过来的数据</p>
</li>
<li><p>传递数据：<code>&lt;Demo name=&quot;xxx&quot;/&gt;</code></p>
</li>
<li><p>接收数据：</p>
<ol>
<li><p>第一种方式（只接收）：<code>props:[&#39;name&#39;] </code></p>
</li>
<li><p>第二种方式（限制类型）：<code>props:&#123;name:String&#125;</code></p>
</li>
<li><p>第三种方式（限制类型、限制必要性、指定默认值）：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">props:&#123;</span><br><span class="line">	<span class="attr">name</span>:&#123;</span><br><span class="line">	<span class="attr">type</span>:<span class="built_in">String</span>, <span class="comment">//类型</span></span><br><span class="line">	<span class="attr">required</span>:<span class="literal">true</span>, <span class="comment">//必要性</span></span><br><span class="line">	<span class="attr">default</span>:<span class="string">&#x27;老王&#x27;</span> <span class="comment">//默认值</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<blockquote>
<p>备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。</p>
</blockquote>
</li>
</ol>
<h2 id="mixin-混入-1"><a href="#mixin-混入-1" class="headerlink" title="mixin(混入)"></a>mixin(混入)</h2><ol>
<li><p>功能：可以把多个组件共用的配置提取成一个混入对象</p>
</li>
<li><p>使用方式：</p>
<p>第一步定义混合：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    data()&#123;....&#125;,</span><br><span class="line">    methods:&#123;....&#125;</span><br><span class="line">    ....</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>第二步使用混入：</p>
<pre><code>全局混入：```Vue.mixin(xxx)```
局部混入：```mixins:[&#39;xxx&#39;]    ```
</code></pre>
</li>
</ol>
<h2 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h2><ol>
<li><p>功能：用于增强Vue</p>
</li>
<li><p>本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。</p>
</li>
<li><p>定义插件：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">对象.install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue, options</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1. 添加全局过滤器</span></span><br><span class="line">    Vue.filter(....)</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2. 添加全局指令</span></span><br><span class="line">    Vue.directive(....)</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3. 配置全局混入(合)</span></span><br><span class="line">    Vue.mixin(....)</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 4. 添加实例方法</span></span><br><span class="line">    Vue.prototype.$myMethod = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;...&#125;</span><br><span class="line">    Vue.prototype.$myProperty = xxxx</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>使用插件：<code>Vue.use()</code></p>
</li>
</ol>
<h2 id="scoped样式"><a href="#scoped样式" class="headerlink" title="scoped样式"></a>scoped样式</h2><ol>
<li>作用：让样式在局部生效，防止冲突。</li>
<li>写法：<code>&lt;style scoped&gt;</code></li>
</ol>
<h2 id="总结TodoList案例"><a href="#总结TodoList案例" class="headerlink" title="总结TodoList案例"></a>总结TodoList案例</h2><ol>
<li><p>组件化编码流程：</p>
<pre><code>(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

        1).一个组件在用：放在组件自身即可。

        2). 一些组件在用：放在他们共同的父组件上（&lt;span style=&quot;color:red&quot;&gt;状态提升&lt;/span&gt;）。

(3).实现交互：从绑定事件开始。
</code></pre>
</li>
<li><p>props适用于：</p>
<pre><code>(1).父组件 ==&gt; 子组件 通信

(2).子组件 ==&gt; 父组件 通信（要求父先给子一个函数）
</code></pre>
</li>
<li><p>使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！</p>
</li>
<li><p>props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。</p>
</li>
</ol>
<h2 id="webStorage"><a href="#webStorage" class="headerlink" title="webStorage"></a>webStorage</h2><ol>
<li><p>存储内容大小一般支持5MB左右（不同浏览器可能还不一样）</p>
</li>
<li><p>浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。</p>
</li>
<li><p>相关API：</p>
<ol>
<li><p><code>xxxxxStorage.setItem(&#39;key&#39;, &#39;value&#39;);</code></p>
<pre><code>该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
</code></pre>
</li>
<li><p><code>xxxxxStorage.getItem(&#39;person&#39;);</code></p>
<pre><code>    该方法接受一个键名作为参数，返回键名对应的值。
</code></pre>
</li>
<li><p><code>xxxxxStorage.removeItem(&#39;key&#39;);</code></p>
<pre><code>    该方法接受一个键名作为参数，并把该键名从存储中删除。
</code></pre>
</li>
<li><p><code> xxxxxStorage.clear()</code></p>
<pre><code>    该方法会清空存储中的所有数据。
</code></pre>
</li>
</ol>
</li>
<li><p>备注：</p>
<ol>
<li>SessionStorage存储的内容会随着浏览器窗口关闭而消失。</li>
<li>LocalStorage存储的内容，需要手动清除才会消失。</li>
<li><code>xxxxxStorage.getItem(xxx)</code>如果xxx对应的value获取不到，那么getItem的返回值是null。</li>
<li><code>JSON.parse(null)</code>的结果依然是null。</li>
</ol>
</li>
</ol>
<h2 id="组件的自定义事件"><a href="#组件的自定义事件" class="headerlink" title="组件的自定义事件"></a>组件的自定义事件</h2><ol>
<li><p>一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===&gt; 父组件</strong></p>
</li>
<li><p>使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A中</span>）。</p>
</li>
<li><p>绑定自定义事件：</p>
<ol>
<li><p>第一种方式，在父组件中：<code>&lt;Demo @atguigu=&quot;test&quot;/&gt;</code>  或 <code>&lt;Demo v-on:atguigu=&quot;test&quot;/&gt;</code></p>
</li>
<li><p>第二种方式，在父组件中：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;Demo ref=<span class="string">&quot;demo&quot;</span>/&gt;</span><br><span class="line">......</span><br><span class="line"><span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">   <span class="built_in">this</span>.$refs.xxx.$on(<span class="string">&#x27;atguigu&#x27;</span>,<span class="built_in">this</span>.test)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>若想让自定义事件只能触发一次，可以使用<code>once</code>修饰符，或<code>$once</code>方法。</p>
</li>
</ol>
</li>
<li><p>触发自定义事件：<code>this.$emit(&#39;atguigu&#39;,数据)</code>        </p>
</li>
<li><p>解绑自定义事件<code>this.$off(&#39;atguigu&#39;)</code></p>
</li>
<li><p>组件上也可以绑定原生DOM事件，需要使用<code>native</code>修饰符。</p>
</li>
<li><p>注意：通过<code>this.$refs.xxx.$on(&#39;atguigu&#39;,回调)</code>绑定自定义事件时，回调<span style="color:red">要么配置在methods中</span>，<span style="color:red">要么用箭头函数</span>，否则this指向会出问题！</p>
</li>
</ol>
<h2 id="全局事件总线（GlobalEventBus）"><a href="#全局事件总线（GlobalEventBus）" class="headerlink" title="全局事件总线（GlobalEventBus）"></a>全局事件总线（GlobalEventBus）</h2><ol>
<li><p>一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。</p>
</li>
<li><p>安装全局事件总线：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">	......</span><br><span class="line">	<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">		Vue.prototype.$bus = <span class="built_in">this</span> <span class="comment">//安装全局事件总线，$bus就是当前应用的vm</span></span><br><span class="line">	&#125;,</span><br><span class="line">    ......</span><br><span class="line">&#125;) </span><br></pre></td></tr></table></figure></li>
<li><p>使用事件总线：</p>
<ol>
<li><p>接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的<span style="color:red">回调留在A组件自身。</span></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">methods</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="function"><span class="title">demo</span>(<span class="params">data</span>)</span>&#123;......&#125;</span><br><span class="line">&#125;</span><br><span class="line">......</span><br><span class="line"><span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">  <span class="built_in">this</span>.$bus.$on(<span class="string">&#x27;xxxx&#x27;</span>,<span class="built_in">this</span>.demo)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>提供数据：<code>this.$bus.$emit(&#39;xxxx&#39;,数据)</code></p>
</li>
</ol>
</li>
<li><p>最好在beforeDestroy钩子中，用$off去解绑<span style="color:red">当前组件所用到的</span>事件。</p>
</li>
</ol>
<h2 id="消息订阅与发布（pubsub）"><a href="#消息订阅与发布（pubsub）" class="headerlink" title="消息订阅与发布（pubsub）"></a>消息订阅与发布（pubsub）</h2><ol>
<li><p>一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。</p>
</li>
<li><p>使用步骤：</p>
<ol>
<li><p>安装pubsub：<code>npm i pubsub-js</code></p>
</li>
<li><p>引入: <code>import pubsub from &#39;pubsub-js&#39;</code></p>
</li>
<li><p>接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。</span></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//发布消息</span></span><br><span class="line">	<span class="attr">methods</span>: &#123;</span><br><span class="line">		<span class="function"><span class="title">sendStudentName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="comment">//	this.$bus.$emit(&#x27;hello&#x27;,this.name)</span></span><br><span class="line">			pubsub.publish(<span class="string">&#x27;getName&#x27;</span>,<span class="built_in">this</span>.name)</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">......</span><br><span class="line"><span class="comment">//订阅一个消息(也可以把箭头函数综合成一个demo写再另外的方法内,避免this指向问题)</span></span><br><span class="line"><span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">  <span class="built_in">this</span>.pubId = pubsub.subscribe(<span class="string">&#x27;xxx&#x27;</span>,<span class="function">(<span class="params">msgName,data</span>)=&gt;</span> &#123;</span><br><span class="line">      <span class="comment">//两个参数 一个是XXX的消息名称,data是里边数据</span></span><br><span class="line">     <span class="comment">// 注意 需要写成箭头函数 因为pubsub的this是undefined 箭头会找到vc</span></span><br><span class="line">		<span class="built_in">console</span>.log(msgName,data,<span class="built_in">this</span>.stuName )</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;,</span><br><span class="line"><span class="function"><span class="title">beforeDestroy</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">	pubsub.unsubscribe(<span class="built_in">this</span>.pubId)<span class="comment">//销毁前需要取消</span></span><br><span class="line">&#125;    </span><br></pre></td></tr></table></figure></li>
<li><p>提供数据：<code>pubsub.publish(&#39;xxx&#39;,数据)</code></p>
</li>
<li><p>最好在beforeDestroy钩子中，用<code>PubSub.unsubscribe(pid)</code>去<span style="color:red">取消订阅。</span></p>
</li>
</ol>
</li>
</ol>
<h2 id="nextTick"><a href="#nextTick" class="headerlink" title="nextTick"></a>nextTick</h2><ol>
<li>语法：<code>this.$nextTick(回调函数)</code></li>
<li>作用：在下一次 DOM 更新结束后执行其指定的回调。</li>
<li>什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。</li>
</ol>
<h2 id="Vue封装的过度与动画"><a href="#Vue封装的过度与动画" class="headerlink" title="Vue封装的过度与动画"></a>Vue封装的过度与动画</h2><ol>
<li><p>作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。</p>
</li>
<li><p>图示：<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" /></p>
</li>
<li><p>写法：</p>
<ol>
<li><p>准备好样式：</p>
<ul>
<li>元素进入的样式：<ol>
<li>v-enter：进入的起点</li>
<li>v-enter-active：进入过程中</li>
<li>v-enter-to：进入的终点</li>
</ol>
</li>
<li>元素离开的样式：<ol>
<li>v-leave：离开的起点</li>
<li>v-leave-active：离开过程中</li>
<li>v-leave-to：离开的终点</li>
</ol>
</li>
</ul>
</li>
<li><p>使用<code>&lt;transition&gt;</code>包裹要过度的元素，并配置name属性：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;transition name=&quot;hello&quot;&gt;</span><br><span class="line">	&lt;h1 v-show=&quot;isShow&quot;&gt;你好啊！&lt;/h1&gt;</span><br><span class="line">&lt;/transition&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>备注：若有多个元素需要过度，则需要使用：<code>&lt;transition-group&gt;</code>，且每个元素都要指定<code>key</code>值。</p>
</li>
</ol>
</li>
</ol>
<h2 id="Axios的基础操作-解决跨域问题"><a href="#Axios的基础操作-解决跨域问题" class="headerlink" title="Axios的基础操作(解决跨域问题)"></a>Axios的基础操作(解决跨域问题)</h2><p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220209161253600.png" alt="image-20220209161253600"></p>
<h4 id="跨域问题-必须同源"><a href="#跨域问题-必须同源" class="headerlink" title="跨域问题:必须同源"></a>跨域问题:必须同源</h4><p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220209161355724.png" alt="image-20220209161355724"></p>
<p><strong>同源:协议名,主机名,端口号</strong></p>
<p>解决方法:</p>
<ol>
<li><p>cors解决</p>
<ul>
<li>比如从 8080 —–5000 更改一下响应头(能解决但是后端麻烦而且不安全)</li>
<li><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220209161717200.png" alt="image-20220209161717200"></li>
</ul>
</li>
<li><p>jsonp</p>
<ul>
<li>script src(巧妙,但开发基本不用) 前后端一起努力,而且只能解决get  post不行</li>
<li>原理: src引用外部资源不受同源策略限制,</li>
</ul>
</li>
<li><p>配置代理服务器</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220209194709698.png" alt="image-20220209194709698"></p>
<p>用粉色的代理服务器当一个中介,但是红圈的两条线不好走, 两个服务器之间的用的http请求,不用前端的ajax传数据,因此同源策略管不着</p>
<p>中间的粉色代理服务器可以使用</p>
<ol>
<li>nginx(有点难 后端知识得会)</li>
<li><strong>vue-cli(手脚架的简单!!)</strong> 就四行代码!!!!        </li>
</ol>
</li>
</ol>
<h2 id="vue脚手架配置代理"><a href="#vue脚手架配置代理" class="headerlink" title="vue脚手架配置代理"></a>vue脚手架配置代理</h2><h3 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a>方法一</h3><pre><code>在vue.config.js中添加如下配置：
</code></pre>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">devServer:&#123;</span><br><span class="line">  <span class="attr">proxy</span>:<span class="string">&quot;http://localhost:5000&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>说明：</p>
<ol>
<li>优点：配置简单，请求资源时直接发给前端（8080）即可。</li>
<li>缺点：不能配置多个代理，不能灵活的控制请求是否走代理。</li>
<li>工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）</li>
</ol>
<h3 id="方法二"><a href="#方法二" class="headerlink" title="方法二"></a>方法二</h3><pre><code>编写vue.config.js配置具体代理规则：
</code></pre>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	<span class="attr">devServer</span>: &#123;</span><br><span class="line">      <span class="attr">proxy</span>: &#123;</span><br><span class="line">      <span class="string">&#x27;/api1&#x27;</span>: &#123;<span class="comment">// 匹配所有以 &#x27;/api1&#x27;开头的请求路径</span></span><br><span class="line">        <span class="attr">target</span>: <span class="string">&#x27;http://localhost:5000&#x27;</span>,<span class="comment">// 代理目标的基础路径</span></span><br><span class="line">        <span class="attr">changeOrigin</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">pathRewrite</span>: &#123;<span class="string">&#x27;^/api1&#x27;</span>: <span class="string">&#x27;&#x27;</span>&#125;<span class="comment">//把新增的响应头删除掉</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="string">&#x27;/api2&#x27;</span>: &#123;<span class="comment">// 匹配所有以 &#x27;/api2&#x27;开头的请求路径</span></span><br><span class="line">        <span class="attr">target</span>: <span class="string">&#x27;http://localhost:5001&#x27;</span>,<span class="comment">// 代理目标的基础路径</span></span><br><span class="line">        <span class="attr">changeOrigin</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">pathRewrite</span>: &#123;<span class="string">&#x27;^/api2&#x27;</span>: <span class="string">&#x27;&#x27;</span>&#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000</span></span><br><span class="line"><span class="comment">   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080</span></span><br><span class="line"><span class="comment">   changeOrigin默认值为true</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<p>说明：</p>
<ol>
<li>优点：可以配置多个代理，且可以灵活的控制请求是否走代理。</li>
<li>缺点：配置略微繁琐，请求资源时必须加前缀。</li>
</ol>
<h2 id="插槽"><a href="#插槽" class="headerlink" title="插槽"></a>插槽</h2><ol>
<li><p>作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 <strong style="color:red">父组件 ===&gt; 子组件</strong> 。</p>
</li>
<li><p>分类：默认插槽、具名插槽、作用域插槽</p>
</li>
<li><p>使用方式：</p>
<ol>
<li><p>默认插槽：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">父组件中：</span><br><span class="line">        &lt;Category&gt;</span><br><span class="line">           &lt;div&gt;html结构1&lt;/div&gt;</span><br><span class="line">        &lt;/Category&gt;</span><br><span class="line">子组件中：</span><br><span class="line">        &lt;template&gt;</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">               &lt;!-- 定义插槽 --&gt;</span><br><span class="line">               &lt;slot&gt;插槽默认内容...&lt;/slot&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/template&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>具名插槽：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">父组件中：</span><br><span class="line">        &lt;Category&gt;</span><br><span class="line">            &lt;template slot=&quot;center&quot;&gt;</span><br><span class="line">              &lt;div&gt;html结构1&lt;/div&gt;</span><br><span class="line">            &lt;/template&gt;</span><br><span class="line"></span><br><span class="line">            &lt;template v-slot:footer&gt;</span><br><span class="line">               &lt;div&gt;html结构2&lt;/div&gt;</span><br><span class="line">            &lt;/template&gt;</span><br><span class="line">        &lt;/Category&gt;</span><br><span class="line">子组件中：</span><br><span class="line">        &lt;template&gt;</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">               &lt;!-- 定义插槽 --&gt;</span><br><span class="line">               &lt;slot name=&quot;center&quot;&gt;插槽默认内容...&lt;/slot&gt;</span><br><span class="line">               &lt;slot name=&quot;footer&quot;&gt;插槽默认内容...&lt;/slot&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/template&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>作用域插槽：</p>
<ol>
<li><p>理解：<span style="color:red">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）</p>
</li>
<li><p>具体编码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">父组件中：</span><br><span class="line">		&lt;Category&gt;</span><br><span class="line">			&lt;template scope=&quot;scopeData&quot;&gt;</span><br><span class="line">				&lt;!-- 生成的是ul列表 --&gt;</span><br><span class="line">				&lt;ul&gt;</span><br><span class="line">					&lt;li v-for=&quot;g in scopeData.games&quot; :key=&quot;g&quot;&gt;\&#123;&#123;g&#125;&#125;&lt;/li&gt;</span><br><span class="line">				&lt;/ul&gt;</span><br><span class="line">			&lt;/template&gt;</span><br><span class="line">		&lt;/Category&gt;</span><br><span class="line"></span><br><span class="line">		&lt;Category&gt;</span><br><span class="line">			&lt;template slot-scope=&quot;scopeData&quot;&gt;</span><br><span class="line">				&lt;!-- 生成的是h4标题 --&gt;</span><br><span class="line">				&lt;h4 v-for=&quot;g in scopeData.games&quot; :key=&quot;g&quot;&gt;\&#123;&#123;g&#125;&#125;&lt;/h4&gt;</span><br><span class="line">			&lt;/template&gt;</span><br><span class="line">		&lt;/Category&gt;</span><br><span class="line">子组件中：</span><br><span class="line">        &lt;template&gt;</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">                &lt;slot :games=&quot;games&quot;&gt;&lt;/slot&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/template&gt;</span><br><span class="line">		</span><br><span class="line">        &lt;script&gt;</span><br><span class="line">            export default &#123;</span><br><span class="line">                name:&#x27;Category&#x27;,</span><br><span class="line">                props:[&#x27;title&#x27;],</span><br><span class="line">                //数据在子组件自身</span><br><span class="line">                data() &#123;</span><br><span class="line">                    return &#123;</span><br><span class="line">                        games:[&#x27;红色警戒&#x27;,&#x27;穿越火线&#x27;,&#x27;劲舞团&#x27;,&#x27;超级玛丽&#x27;]</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;,</span><br><span class="line">            &#125;</span><br><span class="line">        &lt;/script&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
</li>
</ol>
</li>
</ol>
<h2 id="Vuex"><a href="#Vuex" class="headerlink" title="Vuex"></a>Vuex</h2><h3 id="1-概念"><a href="#1-概念" class="headerlink" title="1.概念"></a>1.概念</h3><pre><code>    在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
</code></pre>
<h3 id="2-何时使用？"><a href="#2-何时使用？" class="headerlink" title="2.何时使用？"></a>2.何时使用？</h3><pre><code>    多个组件需要共享数据时,原理图如下
</code></pre>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220211105952194.png" alt="image-20220211105952194"></p>
<h3 id="3-搭建vuex环境"><a href="#3-搭建vuex环境" class="headerlink" title="3.搭建vuex环境"></a>3.搭建vuex环境</h3><ol>
<li><p>创建文件：<code>src/store/index.js</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入Vue核心库</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="comment">//引入Vuex</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="comment">//应用Vuex插件</span></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line"><span class="comment">//准备actions对象——响应组件中用户的动作</span></span><br><span class="line"><span class="keyword">const</span> actions = &#123;&#125;</span><br><span class="line"><span class="comment">//准备mutations对象——修改state中的数据</span></span><br><span class="line"><span class="keyword">const</span> mutations = &#123;&#125;</span><br><span class="line"><span class="comment">//准备state对象——保存具体的数据</span></span><br><span class="line"><span class="keyword">const</span> state = &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建并暴露store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">	actions,</span><br><span class="line">	mutations,</span><br><span class="line">	state</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li><p>在<code>main.js</code>中创建vm时传入<code>store</code>配置项</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">......</span><br><span class="line"><span class="comment">//引入store</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line">......</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建vm</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">	<span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">	<span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> h(App),</span><br><span class="line">	store</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="4-基本使用"><a href="#4-基本使用" class="headerlink" title="4.基本使用"></a>4.基本使用</h3><ol>
<li><p>初始化数据、配置<code>actions(异步修改)</code>、配置<code>mutations</code>(同步修改)，操作文件<code>store文件夹内的index.js</code></p>
<p>Mutations(同步)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在 store中的index.js内写入</span></span><br><span class="line"><span class="attr">mutations</span>: &#123;</span><br><span class="line">   <span class="function"><span class="title">changeK</span>(<span class="params">state,value</span>)</span>&#123;</span><br><span class="line">     state.n+=value</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;,</span><br><span class="line"><span class="comment">//并在主页内创建新的方法去使用</span></span><br><span class="line"> <span class="attr">methods</span>:&#123;</span><br><span class="line">   <span class="function"><span class="title">change</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">     <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;changeK&#x27;</span>,<span class="number">2</span>)</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br><span class="line">   </span><br><span class="line">   </span><br><span class="line">   </span><br></pre></td></tr></table></figure>

<p>actions(异步)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在store中的js内写入异步方法</span></span><br><span class="line"><span class="attr">actions</span>: &#123;</span><br><span class="line">    <span class="function"><span class="title">asyncChangeK</span>(<span class="params">context,p</span>)</span>&#123;</span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        context.commit(<span class="string">&quot;changeK&quot;</span>,p)<span class="comment">//ctx上下文对象(没有this) 并且调用mutations中的同步修改</span></span><br><span class="line">      &#125;,<span class="number">2000</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">//在主页方法中调用</span></span><br><span class="line"><span class="function"><span class="title">changeAsync</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.$store.dispatch(<span class="string">&#x27;asyncChangeK&#x27;</span>,<span class="number">5</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>组件中读取vuex中的数据：<code>$store.state.sum</code></p>
</li>
<li><p>组件中修改vuex中的数据：<code>$store.dispatch(&#39;action中的方法名&#39;,数据)</code> 或 <code>$store.commit(&#39;mutations中的方法名&#39;,数据)</code></p>
<blockquote>
<p> 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写<code>dispatch</code>，直接编写<code>commit</code></p>
</blockquote>
</li>
</ol>
<h3 id=""><a href="#" class="headerlink" title=""></a></h3><h3 id="5-getters的使用"><a href="#5-getters的使用" class="headerlink" title="5.getters的使用"></a>5.getters的使用</h3><ol>
<li><p>概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。</p>
</li>
<li><p>在<code>store.js</code>中追加<code>getters</code>配置</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">......</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> getters = &#123;</span><br><span class="line">	<span class="function"><span class="title">bigSum</span>(<span class="params">state</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> state.sum * <span class="number">10</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建并暴露store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">	......</span><br><span class="line">	getters</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li><p>组件中读取数据：<code>$store.getters.bigSum</code></p>
</li>
</ol>
<h3 id="6-四个map方法的使用"><a href="#6-四个map方法的使用" class="headerlink" title="6.四个map方法的使用"></a>6.四个map方法的使用</h3><ol>
<li><p><strong>mapState方法：</strong>用于帮助我们映射<code>state</code>中的数据为计算属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">computed: &#123;</span><br><span class="line">    <span class="comment">//借助mapState生成计算属性：sum、school、subject（对象写法）</span></span><br><span class="line">     ...mapState(&#123;<span class="attr">sum</span>:<span class="string">&#x27;sum&#x27;</span>,<span class="attr">school</span>:<span class="string">&#x27;school&#x27;</span>,<span class="attr">subject</span>:<span class="string">&#x27;subject&#x27;</span>&#125;),</span><br><span class="line">         </span><br><span class="line">    <span class="comment">//借助mapState生成计算属性：sum、school、subject（数组写法）</span></span><br><span class="line">    ...mapState([<span class="string">&#x27;sum&#x27;</span>,<span class="string">&#x27;school&#x27;</span>,<span class="string">&#x27;subject&#x27;</span>]),</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure></li>
<li><p><strong>mapGetters方法：</strong>用于帮助我们映射<code>getters</code>中的数据为计算属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">computed: &#123;</span><br><span class="line">    <span class="comment">//借助mapGetters生成计算属性：bigSum（对象写法）</span></span><br><span class="line">    ...mapGetters(&#123;<span class="attr">bigSum</span>:<span class="string">&#x27;bigSum&#x27;</span>&#125;),</span><br><span class="line"></span><br><span class="line">    <span class="comment">//借助mapGetters生成计算属性：bigSum（数组写法）</span></span><br><span class="line">    ...mapGetters([<span class="string">&#x27;bigSum&#x27;</span>])</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure></li>
<li><p><strong>mapActions方法：</strong>用于帮助我们生成与<code>actions</code>对话的方法，即：包含<code>$store.dispatch(xxx)</code>的函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">    <span class="comment">//靠mapActions生成：incrementOdd、incrementWait（对象形式）</span></span><br><span class="line">    ...mapActions(&#123;<span class="attr">incrementOdd</span>:<span class="string">&#x27;jiaOdd&#x27;</span>,<span class="attr">incrementWait</span>:<span class="string">&#x27;jiaWait&#x27;</span>&#125;)</span><br><span class="line"></span><br><span class="line">    <span class="comment">//靠mapActions生成：incrementOdd、incrementWait（数组形式）</span></span><br><span class="line">    ...mapActions([<span class="string">&#x27;jiaOdd&#x27;</span>,<span class="string">&#x27;jiaWait&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p><strong>mapMutations方法：</strong>用于帮助我们生成与<code>mutations</code>对话的方法，即：包含<code>$store.commit(xxx)</code>的函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">    <span class="comment">//靠mapActions生成：increment、decrement（对象形式）</span></span><br><span class="line">    ...mapMutations(&#123;<span class="attr">increment</span>:<span class="string">&#x27;JIA&#x27;</span>,<span class="attr">decrement</span>:<span class="string">&#x27;JIAN&#x27;</span>&#125;),</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//靠mapMutations生成：JIA、JIAN（对象形式）</span></span><br><span class="line">    ...mapMutations([<span class="string">&#x27;JIA&#x27;</span>,<span class="string">&#x27;JIAN&#x27;</span>]),</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<blockquote>
<p>备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。</p>
</blockquote>
<h3 id="7-模块化-单文件模块化"><a href="#7-模块化-单文件模块化" class="headerlink" title="7.模块化/单文件模块化"></a>7.模块化/单文件模块化</h3><p>将购物车案例的购物车部分仓库单独写在Car文件的文件夹下</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">    <span class="attr">state</span>: &#123;</span><br><span class="line">        <span class="attr">newList</span>:[]</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">getters</span>: &#123;</span><br><span class="line">        <span class="function"><span class="title">money</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">          <span class="built_in">console</span>.log(x)</span><br><span class="line">          <span class="keyword">return</span> x.newList.reduce(<span class="function">(<span class="params">prev,next</span>)=&gt;</span>prev+(next.flag?next.price*next.num:<span class="number">0</span>),<span class="number">0</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">mutations</span>: &#123;</span><br><span class="line">        <span class="function"><span class="title">changeNewList</span>(<span class="params">state,newList</span>)</span>&#123;</span><br><span class="line">          state.newList = newList</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="function"><span class="title">changeFlag</span>(<span class="params">ctx,index</span>)</span>&#123;</span><br><span class="line">          ctx.newList[index].flag=!ctx.newList[index].flag</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">actions</span>: &#123;</span><br><span class="line">        <span class="function"><span class="title">getNewList</span>(<span class="params">context</span>)</span>&#123;</span><br><span class="line">          axios.get(<span class="string">&#x27;http://localhost:3000/list&#x27;</span>).then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">            context.commit(<span class="string">&#x27;changeNewList&#x27;</span>,res.data)</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在总仓库引入</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"><span class="keyword">import</span> car <span class="keyword">from</span> <span class="string">&#x27;./Car/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  <span class="attr">modules</span>: &#123;</span><br><span class="line">    car</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//注意! 除了state的数据需要多.一次文件名,其余全不变</span></span><br></pre></td></tr></table></figure>



<h3 id="8-模块化-命名空间"><a href="#8-模块化-命名空间" class="headerlink" title="8.模块化+命名空间"></a>8.模块化+命名空间</h3><ol>
<li><p>目的：让代码更好维护，让多种数据分类更加明确。</p>
</li>
<li><p>修改<code>store.js</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> countAbout = &#123;</span><br><span class="line">  <span class="attr">namespaced</span>:<span class="literal">true</span>,<span class="comment">//开启命名空间</span></span><br><span class="line">  <span class="attr">state</span>:&#123;<span class="attr">x</span>:<span class="number">1</span>&#125;,</span><br><span class="line">  <span class="attr">mutations</span>: &#123; ... &#125;,</span><br><span class="line">  <span class="attr">actions</span>: &#123; ... &#125;,</span><br><span class="line">  <span class="attr">getters</span>: &#123;</span><br><span class="line">    <span class="function"><span class="title">bigSum</span>(<span class="params">state</span>)</span>&#123;</span><br><span class="line">       <span class="keyword">return</span> state.sum * <span class="number">10</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> personAbout = &#123;</span><br><span class="line">  <span class="attr">namespaced</span>:<span class="literal">true</span>,<span class="comment">//开启命名空间</span></span><br><span class="line">  <span class="attr">state</span>:&#123; ... &#125;,</span><br><span class="line">  <span class="attr">mutations</span>: &#123; ... &#125;,</span><br><span class="line">  <span class="attr">actions</span>: &#123; ... &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  <span class="attr">modules</span>: &#123;</span><br><span class="line">    countAbout,</span><br><span class="line">    personAbout</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li><p>开启命名空间后，组件中读取state数据：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接读取</span></span><br><span class="line"><span class="built_in">this</span>.$store.state.personAbout.list</span><br><span class="line"><span class="comment">//方式二：借助mapState读取：</span></span><br><span class="line">...mapState(<span class="string">&#x27;countAbout&#x27;</span>,[<span class="string">&#x27;sum&#x27;</span>,<span class="string">&#x27;school&#x27;</span>,<span class="string">&#x27;subject&#x27;</span>]),</span><br></pre></td></tr></table></figure></li>
<li><p>开启命名空间后，组件中读取getters数据：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接读取</span></span><br><span class="line"><span class="built_in">this</span>.$store.getters[<span class="string">&#x27;personAbout/firstPersonName&#x27;</span>]</span><br><span class="line"><span class="comment">//方式二：借助mapGetters读取：</span></span><br><span class="line">...mapGetters(<span class="string">&#x27;countAbout&#x27;</span>,[<span class="string">&#x27;bigSum&#x27;</span>])</span><br></pre></td></tr></table></figure></li>
<li><p>开启命名空间后，组件中调用dispatch</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接dispatch</span></span><br><span class="line"><span class="built_in">this</span>.$store.dispatch(<span class="string">&#x27;personAbout/addPersonWang&#x27;</span>,person)</span><br><span class="line"><span class="comment">//方式二：借助mapActions：</span></span><br><span class="line">...mapActions(<span class="string">&#x27;countAbout&#x27;</span>,&#123;<span class="attr">incrementOdd</span>:<span class="string">&#x27;jiaOdd&#x27;</span>,<span class="attr">incrementWait</span>:<span class="string">&#x27;jiaWait&#x27;</span>&#125;)</span><br></pre></td></tr></table></figure></li>
<li><p>开启命名空间后，组件中调用commit</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接commit</span></span><br><span class="line"><span class="built_in">this</span>.$store.commit(<span class="string">&#x27;personAbout/ADD_PERSON&#x27;</span>,person)</span><br><span class="line"><span class="comment">//方式二：借助mapMutations：</span></span><br><span class="line">...mapMutations(<span class="string">&#x27;countAbout&#x27;</span>,&#123;<span class="attr">increment</span>:<span class="string">&#x27;JIA&#x27;</span>,<span class="attr">decrement</span>:<span class="string">&#x27;JIAN&#x27;</span>&#125;),</span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h2><ol>
<li>理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。</li>
<li>前端路由：key是路径，value是组件。</li>
</ol>
<h3 id="1-基本使用"><a href="#1-基本使用" class="headerlink" title="1.基本使用"></a>1.基本使用</h3><ol>
<li><p>安装vue-router，命令：<code>npm i vue-router</code></p>
</li>
<li><p>应用插件：<code>Vue.use(VueRouter)</code></p>
</li>
<li><p>编写router配置项:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入VueRouter</span></span><br><span class="line"><span class="keyword">import</span> VueRouter <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="comment">//引入Luyou 组件</span></span><br><span class="line"><span class="keyword">import</span> About <span class="keyword">from</span> <span class="string">&#x27;../components/About&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Home <span class="keyword">from</span> <span class="string">&#x27;../components/Home&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//创建router实例对象，去管理一组一组的路由规则</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">	<span class="attr">routes</span>:[</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;/about&#x27;</span>,</span><br><span class="line">			<span class="attr">component</span>:About</span><br><span class="line">		&#125;,</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">			<span class="attr">component</span>:Home</span><br><span class="line">		&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//暴露router</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router</span><br></pre></td></tr></table></figure></li>
<li><p>实现切换（active-class可配置高亮样式）</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link active-class=&quot;active&quot; to=&quot;/about&quot;&gt;About&lt;/router-link&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>指定展示位置</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-view&gt;&lt;/router-view&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="2-几个注意点"><a href="#2-几个注意点" class="headerlink" title="2.几个注意点"></a>2.几个注意点</h3><ol>
<li>路由组件通常存放在<code>pages</code>文件夹，一般组件通常存放在<code>components</code>文件夹。</li>
<li>通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。</li>
<li>每个组件都有自己的<code>$route</code>属性，里面存储着自己的路由信息。</li>
<li>整个应用只有一个router，可以通过组件的<code>$router</code>属性获取到。</li>
</ol>
<h3 id="3-多级路由（多级路由）"><a href="#3-多级路由（多级路由）" class="headerlink" title="3.多级路由（多级路由）"></a>3.多级路由（多级路由）</h3><ol>
<li><p>配置路由规则，使用children配置项：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">routes:[</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="attr">path</span>:<span class="string">&#x27;/about&#x27;</span>,</span><br><span class="line">		<span class="attr">component</span>:About,</span><br><span class="line">	&#125;,</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="attr">path</span>:<span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">		<span class="attr">component</span>:Home,</span><br><span class="line">		<span class="attr">children</span>:[ <span class="comment">//通过children配置子级路由</span></span><br><span class="line">			&#123;</span><br><span class="line">				<span class="attr">path</span>:<span class="string">&#x27;news&#x27;</span>, <span class="comment">//此处一定不要写：/news</span></span><br><span class="line">				<span class="attr">component</span>:News</span><br><span class="line">			&#125;,</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="attr">path</span>:<span class="string">&#x27;message&#x27;</span>,<span class="comment">//此处一定不要写：/message</span></span><br><span class="line">				<span class="attr">component</span>:Message</span><br><span class="line">			&#125;</span><br><span class="line">		]</span><br><span class="line">	&#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure></li>
<li><p>跳转（要写完整路径）：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link to=&quot;/home/news&quot;&gt;News&lt;/router-link&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="4-路由的query参数"><a href="#4-路由的query参数" class="headerlink" title="4.路由的query参数"></a>4.路由的query参数</h3><ol>
<li><p>传递参数</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 跳转并携带query参数，to的字符串写法 --&gt;</span><br><span class="line">&lt;router-link :to=&quot;/home/message/detail?id=666&amp;title=你好&quot;&gt;跳转&lt;/router-link&gt;</span><br><span class="line">				</span><br><span class="line">&lt;!-- 跳转并携带query参数，to的对象写法 --&gt;</span><br><span class="line">&lt;router-link </span><br><span class="line">	:to=&quot;&#123;</span><br><span class="line">		path:&#x27;/home/message/detail&#x27;,</span><br><span class="line">		query:&#123;</span><br><span class="line">		   id:666,</span><br><span class="line">            title:&#x27;你好&#x27;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;&quot;</span><br><span class="line">&gt;跳转&lt;/router-link&gt;</span><br></pre></td></tr></table></figure></li>
<li><p>接收参数：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$route.query.id</span><br><span class="line">$route.query.title</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="5-命名路由"><a href="#5-命名路由" class="headerlink" title="5.命名路由"></a>5.命名路由</h3><ol>
<li><p>作用：可以简化路由的跳转。</p>
</li>
<li><p>如何使用</p>
<ol>
<li><p>给路由命名：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	<span class="attr">path</span>:<span class="string">&#x27;/demo&#x27;</span>,</span><br><span class="line">	<span class="attr">component</span>:Demo,</span><br><span class="line">	<span class="attr">children</span>:[</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;test&#x27;</span>,</span><br><span class="line">			<span class="attr">component</span>:Test,</span><br><span class="line">			<span class="attr">children</span>:[</span><br><span class="line">				&#123;</span><br><span class="line">                      <span class="attr">name</span>:<span class="string">&#x27;hello&#x27;</span> <span class="comment">//给路由命名</span></span><br><span class="line">					<span class="attr">path</span>:<span class="string">&#x27;welcome&#x27;</span>,</span><br><span class="line">					<span class="attr">component</span>:Hello,</span><br><span class="line">				&#125;</span><br><span class="line">			]</span><br><span class="line">		&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>简化跳转：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--简化前，需要写完整的路径 --&gt;</span><br><span class="line">&lt;router-link to=&quot;/demo/test/welcome&quot;&gt;跳转&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line">&lt;!--简化后，直接通过名字跳转 --&gt;</span><br><span class="line">&lt;router-link :to=&quot;&#123;name:&#x27;hello&#x27;&#125;&quot;&gt;跳转&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line">&lt;!--简化写法配合传递参数 --&gt;</span><br><span class="line">&lt;router-link </span><br><span class="line">	:to=&quot;&#123;</span><br><span class="line">		name:&#x27;hello&#x27;,</span><br><span class="line">		query:&#123;</span><br><span class="line">		   id:666,</span><br><span class="line">            title:&#x27;你好&#x27;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;&quot;</span><br><span class="line">&gt;跳转&lt;/router-link&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
</li>
</ol>
<h3 id="6-路由的params参数"><a href="#6-路由的params参数" class="headerlink" title="6.路由的params参数"></a>6.路由的params参数</h3><ol>
<li><p>配置路由，声明接收params参数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	<span class="attr">path</span>:<span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">	<span class="attr">component</span>:Home,</span><br><span class="line">	<span class="attr">children</span>:[</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;news&#x27;</span>,</span><br><span class="line">			<span class="attr">component</span>:News</span><br><span class="line">		&#125;,</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">component</span>:Message,</span><br><span class="line">			<span class="attr">children</span>:[</span><br><span class="line">				&#123;</span><br><span class="line">					<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span>,</span><br><span class="line">					<span class="attr">path</span>:<span class="string">&#x27;detail/:id/:title&#x27;</span>, <span class="comment">//使用占位符声明接收params参数</span></span><br><span class="line">					<span class="attr">component</span>:Detail</span><br><span class="line">				&#125;</span><br><span class="line">			]</span><br><span class="line">		&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>传递参数</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 跳转并携带params参数，to的字符串写法 --&gt;</span><br><span class="line">&lt;router-link :to=&quot;/home/message/detail/666/你好&quot;&gt;跳转&lt;/router-link&gt;</span><br><span class="line">				</span><br><span class="line">&lt;!-- 跳转并携带params参数，to的对象写法 --&gt;</span><br><span class="line">&lt;router-link </span><br><span class="line">	:to=&quot;&#123;</span><br><span class="line">		name:&#x27;xiangqing&#x27;,</span><br><span class="line">		params:&#123;</span><br><span class="line">		   id:666,</span><br><span class="line">            title:&#x27;你好&#x27;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;&quot;</span><br><span class="line">&gt;跳转&lt;/router-link&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！</p>
</blockquote>
</li>
<li><p>接收参数：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$route.params.id</span><br><span class="line">$route.params.title</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="7-路由的props配置"><a href="#7-路由的props配置" class="headerlink" title="7.路由的props配置"></a>7.路由的props配置</h3><pre><code>作用：让路由组件更方便的收到参数
</code></pre>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span>,</span><br><span class="line">	<span class="attr">path</span>:<span class="string">&#x27;detail/:id&#x27;</span>,</span><br><span class="line">	<span class="attr">component</span>:Detail,</span><br><span class="line"></span><br><span class="line">	<span class="comment">//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件</span></span><br><span class="line">	<span class="comment">// props:&#123;a:900&#125;</span></span><br><span class="line"></span><br><span class="line">	<span class="comment">//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件</span></span><br><span class="line">	<span class="comment">// props:true</span></span><br><span class="line">	</span><br><span class="line">	<span class="comment">//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件</span></span><br><span class="line">	<span class="function"><span class="title">props</span>(<span class="params">route</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			<span class="attr">id</span>:route.query.id,</span><br><span class="line">			<span class="attr">title</span>:route.query.title</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="8-lt-router-link-gt-的replace属性"><a href="#8-lt-router-link-gt-的replace属性" class="headerlink" title="8.&lt;router-link&gt;的replace属性"></a>8.<code>&lt;router-link&gt;</code>的replace属性</h3><ol>
<li>作用：控制路由跳转时操作浏览器历史记录的模式</li>
<li>浏览器的历史记录有两种写入方式：分别为<code>push</code>和<code>replace</code>，<code>push</code>是追加历史记录，<code>replace</code>是替换当前记录。路由跳转时候默认为<code>push</code></li>
<li>如何开启<code>replace</code>模式：<code>&lt;router-link replace .......&gt;News&lt;/router-link&gt;</code></li>
</ol>
<h3 id="9-编程式路由导航"><a href="#9-编程式路由导航" class="headerlink" title="9.编程式路由导航"></a>9.编程式路由导航</h3><ol>
<li><p>作用：不借助<code>&lt;router-link&gt; </code>实现路由跳转，让路由跳转更加灵活</p>
</li>
<li><p>具体编码：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//$router的两个API</span></span><br><span class="line"><span class="built_in">this</span>.$router.push(&#123;</span><br><span class="line">	<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span>,</span><br><span class="line">		<span class="attr">params</span>:&#123;</span><br><span class="line">			<span class="attr">id</span>:xxx,</span><br><span class="line">			<span class="attr">title</span>:xxx</span><br><span class="line">		&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">this</span>.$router.replace(&#123;</span><br><span class="line">	<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span>,</span><br><span class="line">		<span class="attr">params</span>:&#123;</span><br><span class="line">			<span class="attr">id</span>:xxx,</span><br><span class="line">			<span class="attr">title</span>:xxx</span><br><span class="line">		&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">this</span>.$router.forward() <span class="comment">//前进</span></span><br><span class="line"><span class="built_in">this</span>.$router.back() <span class="comment">//后退</span></span><br><span class="line"><span class="built_in">this</span>.$router.go() <span class="comment">//可前进也可后退</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="10-缓存路由组件"><a href="#10-缓存路由组件" class="headerlink" title="10.缓存路由组件"></a>10.缓存路由组件</h3><ol>
<li><p>作用：让不展示的路由组件保持挂载，不被销毁。</p>
</li>
<li><p>具体编码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;keep-alive include=&quot;News&quot;&gt; </span><br><span class="line">    &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;/keep-alive&gt;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="11-两个新的生命周期钩子"><a href="#11-两个新的生命周期钩子" class="headerlink" title="11.两个新的生命周期钩子"></a>11.两个新的生命周期钩子</h3><ol>
<li>作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。</li>
<li>具体名字：<ol>
<li><code>activated</code>路由组件被激活时触发。</li>
<li><code>deactivated</code>路由组件失活时触发。</li>
</ol>
</li>
</ol>
<h3 id="12-路由守卫"><a href="#12-路由守卫" class="headerlink" title="12.路由守卫"></a>12.路由守卫</h3><ol>
<li><p>作用：对路由进行权限控制</p>
</li>
<li><p>分类：全局守卫、独享守卫、组件内守卫</p>
</li>
<li><p>全局守卫:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//全局前置守卫：初始化时执行、每次路由切换前执行</span></span><br><span class="line">router.beforeEach(<span class="function">(<span class="params">to,<span class="keyword">from</span>,next</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;beforeEach&#x27;</span>,to,<span class="keyword">from</span>)</span><br><span class="line">	<span class="keyword">if</span>(to.meta.isAuth)&#123; <span class="comment">//判断当前路由是否需要进行权限控制</span></span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">localStorage</span>.getItem(<span class="string">&#x27;school&#x27;</span>) === <span class="string">&#x27;atguigu&#x27;</span>)&#123; <span class="comment">//权限控制的具体规则</span></span><br><span class="line">			next() <span class="comment">//放行</span></span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			alert(<span class="string">&#x27;暂无权限查看&#x27;</span>)</span><br><span class="line">			<span class="comment">// next(&#123;name:&#x27;guanyu&#x27;&#125;)</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		next() <span class="comment">//放行</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//全局后置守卫：初始化时执行、每次路由切换后执行</span></span><br><span class="line">router.afterEach(<span class="function">(<span class="params">to,<span class="keyword">from</span></span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;afterEach&#x27;</span>,to,<span class="keyword">from</span>)</span><br><span class="line">	<span class="keyword">if</span>(to.meta.title)&#123; </span><br><span class="line">		<span class="built_in">document</span>.title = to.meta.title <span class="comment">//修改网页的title</span></span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		<span class="built_in">document</span>.title = <span class="string">&#x27;vue_test&#x27;</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li><p>独享守卫:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在index.js路由表内部配置</span></span><br><span class="line"><span class="function"><span class="title">beforeEnter</span>(<span class="params">to,<span class="keyword">from</span>,next</span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&#x27;beforeEnter&#x27;</span>,to,<span class="keyword">from</span>)</span><br><span class="line">	<span class="keyword">if</span>(to.meta.isAuth)&#123; <span class="comment">//判断当前路由是否需要进行权限控制</span></span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">localStorage</span>.getItem(<span class="string">&#x27;school&#x27;</span>) === <span class="string">&#x27;atguigu&#x27;</span>)&#123;</span><br><span class="line">			next()</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			alert(<span class="string">&#x27;暂无权限查看&#x27;</span>)</span><br><span class="line">			<span class="comment">// next(&#123;name:&#x27;guanyu&#x27;&#125;)</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		next()</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>组件内守卫：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//进入守卫：通过路由规则，进入该组件时被调用,早于beforeCreate</span></span><br><span class="line">beforeRouteEnter (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">    <span class="comment">//此时this还调用不到</span></span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">//离开守卫：通过路由规则，离开该组件时被调用</span></span><br><span class="line">beforeRouteLeave (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//路由数据例如 meta id参数变化时执行,不如watch</span></span><br><span class="line"><span class="function"><span class="title">beforeRouteUpdate</span>(<span class="params">to,<span class="keyword">from</span>,next</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> n = parsInt(<span class="built_in">Math</span>.random()*<span class="number">10</span>)+<span class="number">1</span>;</span><br><span class="line">    <span class="keyword">let</span> m = parsInt(<span class="built_in">Math</span>.random()*<span class="number">10</span>)+<span class="number">1</span>;</span><br><span class="line">    <span class="keyword">if</span>(promot(<span class="string">`<span class="subst">$&#123;n&#125;</span>*<span class="subst">$&#123;m&#125;</span>`</span>)===n*m)&#123;</span><br><span class="line">        next()<span class="comment">//算对了才让出去</span></span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        alert(<span class="string">&#x27;做不出来不许走&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="13-路由器的两种工作模式"><a href="#13-路由器的两种工作模式" class="headerlink" title="13.路由器的两种工作模式"></a>13.路由器的两种工作模式</h3><ol>
<li><p>对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。</p>
</li>
<li><p>hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。</p>
</li>
<li><p>hash模式：</p>
<ol>
<li>地址中永远带着#号，不美观 。</li>
<li>若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。</li>
<li>兼容性较好。</li>
</ol>
</li>
<li><p>history模式：</p>
<ol>
<li>地址干净，美观 。</li>
<li>兼容性和hash模式相比略差。</li>
<li>应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。</li>
</ol>
</li>
<li><p>hash底层原理:利用hash.change  history用的html history对象</p>
</li>
</ol>
<h3 id="14-路由重定向"><a href="#14-路由重定向" class="headerlink" title="14.路由重定向"></a>14.路由重定向</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">路由表内代码:</span><br><span class="line">const routes=[</span><br><span class="line">	&#123;</span><br><span class="line">		path:&#x27;/&#x27;</span><br><span class="line">		redirect:&#123;&#x27;name&#x27;:&#x27;home&#x27;&#125;//命名路由 </span><br><span class="line">		redirect:&quot;/home&quot;//正常写法</span><br><span class="line">	&#125;,</span><br><span class="line">	&#123;</span><br><span class="line">		path:&#x27;/home&#x27;,</span><br><span class="line">		name:&#x27;home&#x27; //命名路由那一块</span><br><span class="line">		</span><br><span class="line">	&#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<h3 id="15-路由组件懒加载"><a href="#15-路由组件懒加载" class="headerlink" title="15.路由组件懒加载"></a>15.路由组件懒加载</h3><p>异步组件,能做代码分割,提升用户体验</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	path:&#x27;*&#x27;,</span><br><span class="line">	component:()=&gt;import(/组件路径)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="16-路由meta值"><a href="#16-路由meta值" class="headerlink" title="16.路由meta值"></a>16.路由meta值</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">   <span class="attr">path</span>: <span class="string">&#x27;*&#x27;</span>,</span><br><span class="line">   <span class="attr">meta</span>:&#123;<span class="attr">flag</span>:<span class="literal">true</span>&#125;,</span><br><span class="line">   <span class="attr">component</span>: <span class="function">() =&gt;</span> </span><br><span class="line">   <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: &quot;NotFond123(浏览器请求名称)&quot; */</span> <span class="string">&#x27;../views/NotFound.vue&#x27;</span>)</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<p>案例:点击时隐藏表头</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220802102008277.png" alt="image-20220802102008277"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;nav v-show=<span class="string">&quot;visible&quot;</span>&gt;<span class="comment">//在表头进行布尔判断</span></span><br><span class="line">      &lt;!-- <span class="xml"><span class="tag">&lt;<span class="name">nav</span> <span class="attr">v-show</span>=<span class="string">!$route.meta.flag</span>&gt;</span> --&gt;</span></span><br><span class="line"><span class="xml">		//进阶写法 省地方 不用watch</span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/&quot;</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span> |</span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/xxx&quot;</span>&gt;</span>XXX<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span> |</span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/about&quot;</span>&gt;</span>About<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">router-view</span>/&gt;</span></span></span><br><span class="line">          </span><br><span class="line">通过meta拿到flag进行判断 监听路由变化 $route</span><br><span class="line"> <span class="attr">watch</span>:&#123;</span><br><span class="line">    $route(n)&#123;<span class="comment">//路由监听</span></span><br><span class="line">      <span class="built_in">this</span>.visible = !n.meta.flag<span class="comment">//如果没有就undefined  点击拿到xxx也就是*好的路由对象</span></span><br><span class="line">      <span class="built_in">console</span>.log(n.meta.flag)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h3 id="-1"><a href="#-1" class="headerlink" title=""></a></h3><p>传值实例</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220802161821737.png" alt="image-20220802161821737"></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220802161833664.png" alt="image-20220802161833664"></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220802161835822.png" alt="image-20220802161835822"></p>
<h2 id="Axios-actions的异步请求"><a href="#Axios-actions的异步请求" class="headerlink" title="Axios+actions的异步请求"></a>Axios+actions的异步请求</h2><p>1.在vue.config.js中添加正向代理服务器 原理:<strong>服务器与服务器之间可以跨域 通过代理先接收到本体服务器再同源</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">devServer:&#123;</span><br><span class="line">  <span class="attr">proxy</span>:&#123;</span><br><span class="line">    <span class="string">&quot;/cz&quot;</span>:&#123;</span><br><span class="line">      <span class="string">&quot;target&quot;</span>:<span class="string">&quot;https://shopapi.smartisan.com&quot;</span>,</span><br><span class="line">      <span class="string">&quot;changeOrigin&quot;</span>:<span class="literal">true</span>,</span><br><span class="line">      <span class="string">&quot;pathRewrite&quot;</span>:&#123;</span><br><span class="line">        <span class="string">&quot;^/cz&quot;</span>:<span class="string">&quot;/&quot;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>2.在store目录下的index.js中配置异步请求</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  <span class="attr">state</span>: &#123;</span><br><span class="line">    <span class="attr">list</span>:[]<span class="comment">//3.仓库中加入list接受响应体内部数据</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">mutations</span>: &#123;</span><br><span class="line">    <span class="function"><span class="title">changeList</span>(<span class="params">state,list</span>)</span>&#123;</span><br><span class="line">      state.list = list<span class="comment">//2.将数据存入list</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">actions</span>: &#123;</span><br><span class="line">    <span class="function"><span class="title">getList</span>(<span class="params">context</span>)</span>&#123;<span class="comment">//1.获取List请求结果</span></span><br><span class="line">      axios.get(<span class="string">&quot;/cz/mobile/new/home?channel_id=1002&quot;</span>).then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">        context.commit(<span class="string">&#x27;changeList&#x27;</span>,res.data.data[<span class="number">0</span>].content)</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//最后在显示的组件内创建后进行页面渲染</span></span><br><span class="line">  <span class="function"><span class="title">created</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.$store.dispatch(<span class="string">&quot;getList&quot;</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="Json-server将json文件变成接口"><a href="#Json-server将json文件变成接口" class="headerlink" title="Json-server将json文件变成接口"></a>Json-server将json文件变成接口</h3><p>首先全局安装</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm i json-server -g</span><br><span class="line">json-server --verson</span><br><span class="line"></span><br><span class="line">使用时需要文件夹对应</span><br><span class="line">json-server data.json  <span class="comment">//默认localhost:3000</span></span><br></pre></td></tr></table></figure>





<h3 id="Axios二次封装"><a href="#Axios二次封装" class="headerlink" title="Axios二次封装"></a>Axios二次封装</h3><p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="C:\Users\20815\AppData\Roaming\Typora\typora-user-images\image-20220809111543889.png" alt="image-20220809111543889"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//二次封装axios</span></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span></span><br><span class="line"><span class="keyword">let</span> instance = axios.create(&#123;</span><br><span class="line">    <span class="attr">baseURL</span>:<span class="string">&#x27;/api&#x27;</span>,</span><br><span class="line">    <span class="attr">timeout</span>:<span class="number">3000</span>,<span class="comment">//三秒超过的算超时</span></span><br><span class="line">&#125;)</span><br><span class="line">instance.interceptors.request.use(<span class="function">(<span class="params">config</span>)=&gt;</span>&#123;</span><br><span class="line">    config.headers[<span class="string">&quot;X-Nideshop-Token&quot;</span>]=<span class="string">&quot;token&quot;</span> <span class="comment">//在请求头中加入token令牌</span></span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">&#125;)</span><br><span class="line">instance.interceptors.response.use(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> res.data</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> instance</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在api内引入上面封装好的</span></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&#x27;./index&#x27;</span><span class="comment">//引入上边</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> getHomeList=<span class="function">()=&gt;</span>axios.get(<span class="string">&quot;/index/index&quot;</span>)<span class="comment">//暴露新的方法代替axios.get</span></span><br></pre></td></tr></table></figure>



<h3 id="Axios对比Ajax"><a href="#Axios对比Ajax" class="headerlink" title="Axios对比Ajax"></a>Axios对比Ajax</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>可以拦截请求以及相应 请求前:<span class="number">2</span>次封装  响应后 </span><br><span class="line"><span class="keyword">let</span> instance = axios.create(&#123;</span><br><span class="line">    <span class="attr">baseURL</span>:<span class="string">&#x27;/api&#x27;</span>,</span><br><span class="line">    <span class="attr">timeout</span>:<span class="number">5000</span></span><br><span class="line">&#125;)</span><br><span class="line">instance.interceptors.response.use(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> res.data</span><br><span class="line">&#125;)</span><br><span class="line">把res.data.data转化为 res.data </span><br></pre></td></tr></table></figure>



<h3 id="v-lazy依赖的使用方法"><a href="#v-lazy依赖的使用方法" class="headerlink" title="v-lazy依赖的使用方法"></a>v-lazy依赖的使用方法</h3><p>使用vant组件后,在main.js入口文件内引入并使用VueLazy 1.3.3版本  <strong>下载方式:npm i <a href="mailto:&#x76;&#x75;&#101;&#x2d;&#x6c;&#97;&#122;&#x79;&#x6c;&#x6f;&#x61;&#x64;&#64;&#49;&#46;&#x33;&#46;&#51;">&#x76;&#x75;&#101;&#x2d;&#x6c;&#97;&#122;&#x79;&#x6c;&#x6f;&#x61;&#x64;&#64;&#49;&#46;&#x33;&#46;&#51;</a></strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> VueLazyload <span class="keyword">from</span> <span class="string">&#x27;vue-lazyload&#x27;</span></span><br><span class="line">Vue.use(Vant);</span><br><span class="line"><span class="keyword">const</span> loadimage = <span class="built_in">require</span>(<span class="string">&#x27;@/assets/img/ljy.jpg&#x27;</span>)</span><br><span class="line">Vue.use(VueLazyload, &#123;</span><br><span class="line">  <span class="attr">loading</span>: loadimage,<span class="comment">//引入后的默认图片</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h3 id="过滤器-过滤-加密-某些数据-相当于重写toString方法"><a href="#过滤器-过滤-加密-某些数据-相当于重写toString方法" class="headerlink" title="过滤器 过滤(加密)某些数据 相当于重写toString方法"></a>过滤器 过滤(加密)某些数据 相当于重写toString方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Vue.filter(<span class="string">&quot;formatMoney&quot;</span>,<span class="function">(<span class="params">value</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&#x27;￥&#x27;</span> + value.toFixed(<span class="number">2</span>)+<span class="string">&#x27;元&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line">\&#123;&#123;<span class="number">123</span>|formatMoney&#125;&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">lee</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://blog.cai2.wang/2022/08/24/Vue%E5%85%A8%E5%AE%B6%E6%A1%B6/">http://blog.cai2.wang/2022/08/24/Vue全家桶/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://blog.cai2.wang" target="_blank">李世龙</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_Mind_map_re_nlb6.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button button--animated"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/wechat.jpg" target="_blank"><img class="post-qr-code-img" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/wechat.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/alipay.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2022/08/24/Webpack/"><img class="prev-cover" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_server_cluster_jwwq.png" onerror="onerror=null;src='https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Webpack</div></div></a></div><div class="next-post pull-right"><a href="/2022/08/24/Promis-Async-await-Loop/"><img class="next-cover" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_pair_programming_njlp.png" onerror="onerror=null;src='https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Promis_Async_await_Loop</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF"><span class="toc-number">1.</span> <span class="toc-text">Vue学习路线</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFVue"><span class="toc-number">1.1.</span> <span class="toc-text">什么是Vue</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E7%89%B9%E7%82%B9"><span class="toc-number">1.2.</span> <span class="toc-text">Vue特点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E7%AE%80%E5%8D%95%E6%A1%88%E4%BE%8B"><span class="toc-number">1.3.</span> <span class="toc-text">Vue简单案例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95"><span class="toc-number">1.4.</span> <span class="toc-text">模板语法:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%92%E5%80%BC%E8%AF%AD%E6%B3%95-lt-%E2%80%93swig%EF%BF%BC120%E2%80%93-gt"><span class="toc-number">1.4.1.</span> <span class="toc-text">插值语法&lt;!–swig￼120–&gt;</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%9B%91%E8%A7%86"><span class="toc-number">1.4.2.</span> <span class="toc-text">监视</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%91%E8%A7%86%E5%A4%9A%E7%BA%A7%E7%BB%93%E6%9E%84%E4%B8%AD%E6%89%80%E6%9C%89%E5%B1%9E%E6%80%A7%E5%8F%98%E5%8C%96"><span class="toc-number">1.5.</span> <span class="toc-text">监视多级结构中所有属性变化:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%91%E8%A7%86%E7%AE%80%E5%86%99%E5%BD%A2%E5%BC%8F"><span class="toc-number">1.6.</span> <span class="toc-text">监视简写形式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7%E5%92%8C%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.7.</span> <span class="toc-text">侦听属性和计算属性的区别:</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%91%E5%AE%9A%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.</span> <span class="toc-text">绑定样式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#class%E7%9A%84%E7%BB%91%E5%AE%9A"><span class="toc-number">2.0.1.</span> <span class="toc-text">class的绑定</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Style%E7%9A%84%E7%BB%91%E5%AE%9A"><span class="toc-number">2.0.2.</span> <span class="toc-text">Style的绑定</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93"><span class="toc-number">2.1.</span> <span class="toc-text">条件渲染</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#v-show-v-if"><span class="toc-number">2.1.1.</span> <span class="toc-text">v-show&#x2F;v-if</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-else-if-%E8%A1%A5%E5%85%85-v-if-%E5%A6%82%E6%9E%9Cif%E6%88%90%E5%8A%9F-else-if-%E4%B8%8D%E8%BF%9B%E8%A1%8C%E5%88%A4%E6%96%AD-%E5%87%8F%E5%B0%91%E6%B6%88%E8%80%97"><span class="toc-number">2.1.2.</span> <span class="toc-text">v-else-if: 补充 v-if  如果if成功, else if 不进行判断 减少消耗</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#v-else-%E5%8F%AA%E8%A6%81%E5%86%99%E4%BA%86else-%E5%BD%93if%E6%9D%A1%E4%BB%B6%E4%B8%8D%E6%88%90%E7%AB%8B%E6%97%B6-else%E5%BF%85%E5%AE%9A%E6%88%90%E5%8A%9F-%E4%B8%8D%E5%86%99%E5%88%A4%E6%96%AD%E5%86%85%E5%AE%B9-%E5%86%99%E4%BA%86%E6%B2%A1%E7%94%A8"><span class="toc-number">2.1.3.</span> <span class="toc-text">v-else:只要写了else,当if条件不成立时,else必定成功(不写判断内容,写了没用)</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93"><span class="toc-number">2.2.</span> <span class="toc-text">列表渲染</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%E7%9A%84key%E5%80%BC"><span class="toc-number">2.2.1.</span> <span class="toc-text">列表渲染的key值</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E7%9A%84%E8%BF%87%E6%BB%A4"><span class="toc-number">2.2.2.</span> <span class="toc-text">列表的过滤:</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E6%8E%92%E5%BA%8F"><span class="toc-number">2.2.3.</span> <span class="toc-text">列表排序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Vue%E6%A3%80%E6%B5%8B%E6%95%B0%E6%8D%AE%E5%8E%9F%E7%90%86"><span class="toc-number">2.2.4.</span> <span class="toc-text">Vue检测数据原理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Vue%E5%A6%82%E4%BD%95%E6%A3%80%E6%B5%8B%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E7%9A%84%E6%94%B9%E5%8F%98"><span class="toc-number">2.2.5.</span> <span class="toc-text">Vue如何检测对象属性的改变</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Vue-set%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">2.2.6.</span> <span class="toc-text">Vue.set的使用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E7%9A%84%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9Av-model%E7%9A%84%E7%BB%86%E8%8A%82"><span class="toc-number">2.3.</span> <span class="toc-text">Vue的表单数据绑定v-model的细节</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B6%E4%BB%96v-%E6%8C%87%E4%BB%A4"><span class="toc-number">2.4.</span> <span class="toc-text">其他v-指令</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4"><span class="toc-number">2.5.</span> <span class="toc-text">自定义指令</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%B0%86%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E5%8F%98%E6%88%90%E5%85%A8%E5%B1%80"><span class="toc-number">2.5.1.</span> <span class="toc-text">如何将自定义指令变成全局</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">2.6.</span> <span class="toc-text">Vue生命周期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E7%BB%84%E4%BB%B6%E5%8C%96"><span class="toc-number">2.7.</span> <span class="toc-text">Vue组件化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%9D%9E%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E5%92%8C%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6"><span class="toc-number">2.7.1.</span> <span class="toc-text">非单文件组件和单文件组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E5%88%9B%E5%BB%BA%E7%9A%84%E4%B8%89%E4%B8%AA%E6%AD%A5%E9%AA%A4"><span class="toc-number">2.7.2.</span> <span class="toc-text">组件创建的三个步骤</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6"><span class="toc-number">2.7.2.1.</span> <span class="toc-text">创建组件</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6"><span class="toc-number">2.7.2.2.</span> <span class="toc-text">使用组件</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E7%9A%84%E5%B5%8C%E5%A5%97"><span class="toc-number">2.7.3.</span> <span class="toc-text">组件的嵌套</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#VueComponent-vc-%E7%BB%84%E4%BB%B6%E7%9A%84%E5%AE%9E%E4%BE%8B%E5%AF%B9%E8%B1%A1"><span class="toc-number">2.7.4.</span> <span class="toc-text">VueComponent(vc) 组件的实例对象</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#VueComponent%E4%B8%8EVue%E5%AE%9E%E4%BE%8B%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">2.7.5.</span> <span class="toc-text">VueComponent与Vue实例的区别</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JavaScript%E4%B8%AD%E7%9A%84%E5%8E%9F%E5%9E%8B%E5%A4%8D%E4%B9%A0"><span class="toc-number">2.8.</span> <span class="toc-text">JavaScript中的原型复习</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#VC%E5%92%8CVM%E7%9A%84%E5%86%85%E7%BD%AE%E5%85%B3%E7%B3%BB"><span class="toc-number">2.8.1.</span> <span class="toc-text">VC和VM的内置关系</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6"><span class="toc-number">2.9.</span> <span class="toc-text">单文件组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue%E8%84%9A%E6%89%8B%E6%9E%B6"><span class="toc-number">2.10.</span> <span class="toc-text">Vue脚手架</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Render%E5%87%BD%E6%95%B0"><span class="toc-number">2.11.</span> <span class="toc-text">Render函数</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#ref%E5%B1%9E%E6%80%A7"><span class="toc-number">2.11.1.</span> <span class="toc-text">ref属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Props%E5%B1%9E%E6%80%A7"><span class="toc-number">2.11.2.</span> <span class="toc-text">Props属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%A9%E7%94%A8props%E5%90%91%E7%88%B6%E5%85%83%E7%B4%A0%E4%BC%A0%E5%80%BC"><span class="toc-number">2.11.3.</span> <span class="toc-text">利用props向父元素传值</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#mixin-%E6%B7%B7%E5%85%A5"><span class="toc-number">2.11.4.</span> <span class="toc-text">mixin 混入</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Scoped%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.12.</span> <span class="toc-text">Scoped样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%8F%E5%85%B8%E6%A1%88%E4%BE%8B-%E8%AE%B0%E4%BA%8B%E6%9C%AC"><span class="toc-number">2.13.</span> <span class="toc-text">经典案例 记事本</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6"><span class="toc-number">2.14.</span> <span class="toc-text">自定义组件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A1%A5%E5%85%85-%E5%A6%82%E6%9E%9C%E5%8F%AA%E6%83%B3%E8%A7%A6%E5%8F%91%E4%B8%80%E6%AC%A1-once-v-once"><span class="toc-number">2.14.1.</span> <span class="toc-text">补充:如果只想触发一次,$once  v-once</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E8%A7%A3%E7%BB%91"><span class="toc-number">2.14.2.</span> <span class="toc-text">自定义组件解绑</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%AC%94%E8%AE%B0"><span class="toc-number"></span> <span class="toc-text">笔记</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%84%9A%E6%89%8B%E6%9E%B6%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84"><span class="toc-number">1.</span> <span class="toc-text">脚手架文件结构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E4%B8%8D%E5%90%8C%E7%89%88%E6%9C%AC%E7%9A%84Vue"><span class="toc-number">2.</span> <span class="toc-text">关于不同版本的Vue</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-config-js%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">3.</span> <span class="toc-text">vue.config.js配置文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ref%E5%B1%9E%E6%80%A7-1"><span class="toc-number">4.</span> <span class="toc-text">ref属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#props%E9%85%8D%E7%BD%AE%E9%A1%B9"><span class="toc-number">5.</span> <span class="toc-text">props配置项</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mixin-%E6%B7%B7%E5%85%A5-1"><span class="toc-number">6.</span> <span class="toc-text">mixin(混入)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E4%BB%B6"><span class="toc-number">7.</span> <span class="toc-text">插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#scoped%E6%A0%B7%E5%BC%8F"><span class="toc-number">8.</span> <span class="toc-text">scoped样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%BB%E7%BB%93TodoList%E6%A1%88%E4%BE%8B"><span class="toc-number">9.</span> <span class="toc-text">总结TodoList案例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#webStorage"><span class="toc-number">10.</span> <span class="toc-text">webStorage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6"><span class="toc-number">11.</span> <span class="toc-text">组件的自定义事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF%EF%BC%88GlobalEventBus%EF%BC%89"><span class="toc-number">12.</span> <span class="toc-text">全局事件总线（GlobalEventBus）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B6%88%E6%81%AF%E8%AE%A2%E9%98%85%E4%B8%8E%E5%8F%91%E5%B8%83%EF%BC%88pubsub%EF%BC%89"><span class="toc-number">13.</span> <span class="toc-text">消息订阅与发布（pubsub）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#nextTick"><span class="toc-number">14.</span> <span class="toc-text">nextTick</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue%E5%B0%81%E8%A3%85%E7%9A%84%E8%BF%87%E5%BA%A6%E4%B8%8E%E5%8A%A8%E7%94%BB"><span class="toc-number">15.</span> <span class="toc-text">Vue封装的过度与动画</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Axios%E7%9A%84%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C-%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98"><span class="toc-number">16.</span> <span class="toc-text">Axios的基础操作(解决跨域问题)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98-%E5%BF%85%E9%A1%BB%E5%90%8C%E6%BA%90"><span class="toc-number">16.0.1.</span> <span class="toc-text">跨域问题:必须同源</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue%E8%84%9A%E6%89%8B%E6%9E%B6%E9%85%8D%E7%BD%AE%E4%BB%A3%E7%90%86"><span class="toc-number">17.</span> <span class="toc-text">vue脚手架配置代理</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%B8%80"><span class="toc-number">17.1.</span> <span class="toc-text">方法一</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%BA%8C"><span class="toc-number">17.2.</span> <span class="toc-text">方法二</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E6%A7%BD"><span class="toc-number">18.</span> <span class="toc-text">插槽</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vuex"><span class="toc-number">19.</span> <span class="toc-text">Vuex</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E6%A6%82%E5%BF%B5"><span class="toc-number">19.1.</span> <span class="toc-text">1.概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8%EF%BC%9F"><span class="toc-number">19.2.</span> <span class="toc-text">2.何时使用？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%90%AD%E5%BB%BAvuex%E7%8E%AF%E5%A2%83"><span class="toc-number">19.3.</span> <span class="toc-text">3.搭建vuex环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">19.4.</span> <span class="toc-text">4.基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link"><span class="toc-number">19.5.</span> <span class="toc-text"></span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-getters%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">19.6.</span> <span class="toc-text">5.getters的使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E5%9B%9B%E4%B8%AAmap%E6%96%B9%E6%B3%95%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">19.7.</span> <span class="toc-text">6.四个map方法的使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E6%A8%A1%E5%9D%97%E5%8C%96-%E5%8D%95%E6%96%87%E4%BB%B6%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">19.8.</span> <span class="toc-text">7.模块化&#x2F;单文件模块化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-%E6%A8%A1%E5%9D%97%E5%8C%96-%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4"><span class="toc-number">19.9.</span> <span class="toc-text">8.模块化+命名空间</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1"><span class="toc-number">20.</span> <span class="toc-text">路由</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">20.1.</span> <span class="toc-text">1.基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%87%A0%E4%B8%AA%E6%B3%A8%E6%84%8F%E7%82%B9"><span class="toc-number">20.2.</span> <span class="toc-text">2.几个注意点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%A4%9A%E7%BA%A7%E8%B7%AF%E7%94%B1%EF%BC%88%E5%A4%9A%E7%BA%A7%E8%B7%AF%E7%94%B1%EF%BC%89"><span class="toc-number">20.3.</span> <span class="toc-text">3.多级路由（多级路由）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E8%B7%AF%E7%94%B1%E7%9A%84query%E5%8F%82%E6%95%B0"><span class="toc-number">20.4.</span> <span class="toc-text">4.路由的query参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1"><span class="toc-number">20.5.</span> <span class="toc-text">5.命名路由</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E8%B7%AF%E7%94%B1%E7%9A%84params%E5%8F%82%E6%95%B0"><span class="toc-number">20.6.</span> <span class="toc-text">6.路由的params参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E8%B7%AF%E7%94%B1%E7%9A%84props%E9%85%8D%E7%BD%AE"><span class="toc-number">20.7.</span> <span class="toc-text">7.路由的props配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-lt-router-link-gt-%E7%9A%84replace%E5%B1%9E%E6%80%A7"><span class="toc-number">20.8.</span> <span class="toc-text">8.&lt;router-link&gt;的replace属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA"><span class="toc-number">20.9.</span> <span class="toc-text">9.编程式路由导航</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-%E7%BC%93%E5%AD%98%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6"><span class="toc-number">20.10.</span> <span class="toc-text">10.缓存路由组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#11-%E4%B8%A4%E4%B8%AA%E6%96%B0%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90"><span class="toc-number">20.11.</span> <span class="toc-text">11.两个新的生命周期钩子</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB"><span class="toc-number">20.12.</span> <span class="toc-text">12.路由守卫</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-%E8%B7%AF%E7%94%B1%E5%99%A8%E7%9A%84%E4%B8%A4%E7%A7%8D%E5%B7%A5%E4%BD%9C%E6%A8%A1%E5%BC%8F"><span class="toc-number">20.13.</span> <span class="toc-text">13.路由器的两种工作模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#14-%E8%B7%AF%E7%94%B1%E9%87%8D%E5%AE%9A%E5%90%91"><span class="toc-number">20.14.</span> <span class="toc-text">14.路由重定向</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#15-%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E6%87%92%E5%8A%A0%E8%BD%BD"><span class="toc-number">20.15.</span> <span class="toc-text">15.路由组件懒加载</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#16-%E8%B7%AF%E7%94%B1meta%E5%80%BC"><span class="toc-number">20.16.</span> <span class="toc-text">16.路由meta值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#-1"><span class="toc-number">20.17.</span> <span class="toc-text"></span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Axios-actions%E7%9A%84%E5%BC%82%E6%AD%A5%E8%AF%B7%E6%B1%82"><span class="toc-number">21.</span> <span class="toc-text">Axios+actions的异步请求</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Json-server%E5%B0%86json%E6%96%87%E4%BB%B6%E5%8F%98%E6%88%90%E6%8E%A5%E5%8F%A3"><span class="toc-number">21.1.</span> <span class="toc-text">Json-server将json文件变成接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Axios%E4%BA%8C%E6%AC%A1%E5%B0%81%E8%A3%85"><span class="toc-number">21.2.</span> <span class="toc-text">Axios二次封装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Axios%E5%AF%B9%E6%AF%94Ajax"><span class="toc-number">21.3.</span> <span class="toc-text">Axios对比Ajax</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-lazy%E4%BE%9D%E8%B5%96%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">21.4.</span> <span class="toc-text">v-lazy依赖的使用方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%87%E6%BB%A4%E5%99%A8-%E8%BF%87%E6%BB%A4-%E5%8A%A0%E5%AF%86-%E6%9F%90%E4%BA%9B%E6%95%B0%E6%8D%AE-%E7%9B%B8%E5%BD%93%E4%BA%8E%E9%87%8D%E5%86%99toString%E6%96%B9%E6%B3%95"><span class="toc-number">21.5.</span> <span class="toc-text">过滤器 过滤(加密)某些数据 相当于重写toString方法</span></a></li></ol></li></ol></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2021 - 2022 By lee</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">这是footer</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (true){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>if (document.getElementsByClassName('mermaid').length) {
  if (window.mermaidJsLoad) mermaid.init()
  else {
    getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(() => {
      window.mermaidJsLoad = true
      mermaid.initialize({
        theme: 'default',
      })
      true && mermaid.init()
    })
  }
}</script></div><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js" async="async" mobile="false"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.removeEventListener('scroll', window.tocScrollFn)
  window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>